Clearing Floats – A Better Solution

I’m sure all web designers have come across a really annoying problem with multiple  <div> columns that float.

The Problem:

If you have a 2 column layout and one <div> has “float: left;” and the other “float: right;”, the containing <div> tag is not going to expand beyond those 2 floating <div> tags. The old solution was to put a new <div> tag under those columns, with the CSS rule of “clear: all”. So you would end up with the following code:

<div id=”container”>

<div id=”column_left”>Content</div>

<div id=”column_right”>Content</div>

<div class=”float_clear”></div>

</div>

#container {
border: 1px solid #000000;
}

#column_left {
float: left;
}

#column_right {
float: right;
}

.float_clear {
clear: both;
}

Although this works just fine and dandy, the main issue with it is that it creates extra unwanted HTML markup. Well the good news is that a better solution has since emerged. Instead of using the float_clear tag, replace your #container CSS with the following:

#container {
border: 1px solid #000000;
overflow: auto;
width: 100%
}

This results in the same outcome as using the <div class=”float_clear”></div> markup and clear: both; CSS.

Brilliant!