Floating And Clearing

From CSS Standards FAQ

Illustration of what happens when you don't clear your floats

Floating is a way to position elements with css. It can be used to make column-like layouts like you can with tables. If used for a column-like layout you most likely want to clear the floated elements to bring them in to the document flow again. In some cases simply using clear:both on the first element after the floated elements will work, but in some cases your html will look like:

<div id="container">
        <div id="col1"></div>
        <div id="col2"></div>
</div>

and you can't clear the floating elements. Luckely there are methods for such situation which you can read about in Methods for Containing Floats.

Futher Reading

• Floatutorial for simple and advance tutorials.
• Methods for Containing Floats by Ed Eliot
• Faux Columns