clear:both, overflow:hidden and float

To keep it simple, when you use ‘float:left or float:right’ on some elements, which are wrapped in a same parent element, the parent element can’t become large enough to cover its child-elements. In this situation, use ‘clear:both’ like this:


<div class="parent">
<div style="float:left">float to left</div>
<div style="float:right">float to right</div>
<div style="clear:both"></div>
</div>


Another way to solve the problem is by adding ‘overflow:hidden’ to the parent element. To make it work, its ‘height’ should be auto like the last situation. Just make sure it can’t be ‘400px ’ like this. It’ll work like this:

<div class="parent" style="overflow:hidden">
<div style="float:left">float to left</div>
<div style="float:right">float to right</div>
</div>