Aamir Rizwan Aamir Rizwan - 5 months ago 16
CSS Question

Height of outer div not expanding with inner div

I have a bodyMain div of 100% width. Inside it is a body div 800px with auto margin(can I use 'body' as id ?). Inside this are two divs bodyLeft and bodyRight 200px and 600px wide respectively. When I add content to inner divs neither bodyMain nor body expands in height . All heights are auto.

Here is the code: http://jsfiddle.net/TqxHq/18/

HTML:

<body>
<div id="bodyMain">
<div id="body">
<div id="bodyLeft"> left text goes here<br />
</div>
<div id="bodyRight">Right text goes here
</div>
</div>
</div>
</body>


CSS:

#bodyMain{
border:1px solid red;
width:100%;
height:auto;

}
#body{
border:1px solid green;
width:804px;
height:auto;
margin:auto;
}
#bodyLeft{
border:1px solid blue;
float:left;
width:200PX;
height:auto;
}
#bodyRight{
border:1px solid orange;
float:right;
width:600PX;
height:auto;
}

Answer

You must add

<div style="clear:both;"></div> 

at the end of floating div to fix this issue. see here

Problem happens when a floated element is within a container box and element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use 2 methods to fix it:

clear:both
clearfix