Self Clearing Floats [CSS]

If you're working with floats, you've probably at one point or another had to use an extra div with a "clear: both;" style to ensure the container's dimensions stretch to match the dimensions of its content.

Everybody hates unnecessary markup, and sometimes it's not practical or possible to add those extra divs anyway - usually when we're dealing with menus.

As usual, Quirksmode to the rescue! This article explains how to achieve self clearing floats, with only two lines of CSS.

... adding an HTML element for presentation's sake is something we've learned to avoid. Unfortunately the problem could not be solved in any other way, until now.

Read the article at http://www.quirksmode.org/css/clearing.html.