Menu
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;
}
877
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
This is a common issue when working with floats. There are a couple of common solutions:
Add a div after the floats with clear: both
Add the two floats into a container with the CSS attribute overflow: auto
Make the parent element a float
Using the :after CSS pseudo element with the CSS: .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
Adding a set height to the parent element
See this article
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
