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>