Question

I have a container which has two children divs (toggle yellow background to see them) which are left floated. I wanted to add a third one (red colored) below those two, without any floating, but it stretches through all the container. Any ideas why?

JSFIDDLE: http://jsfiddle.net/RrQff/2/

HTML

<center>
<div id='container'>
    <div class="big"></div>
    <div class="big"></div>
    <div id='extra'>abc<div>       
<div>
</center>

CSS

#container {

    height:400px;
    width:400px;
    background-color:gray;
}

.big {
    height:350px;
   /* background-color:yellow;*/
}

#container > div:first-child {border-right:1px solid black;}

#container > div {
width:199px;
float:left;

}

#extra {

    background-color:red;
    width:80% !important;
    float:none !important;
    margin-top:20px;
}

Answer 1

Add clear: both; to the css of your #extra div, like so:

#extra {
    background-color:red;
    width:80% !important;
    float:none !important;
    margin-top:20px;
    clear: both;
}