Clearing Floats in CSS

This one was long overdue. Even after a year of coding with only CSS, I was ready to sit down and relearn floats. There had to be something I was missing. It just didnt work. Since the default behavior of a div is to stack on top of each other, they must be floated, so they behave like table columns. The problem arises after the float. The float must be cleared somehow or the info below runs right into the columns.

After reading Smashing Magazines article on CSS Floats I was surprised at how SIMPLE the fix is. Two little words were the key to ending my frustration. overflow:auto. remember them well.

Here’s example code for ending your float woes:

Build your columns inside of a container and assign the overflow to auto…

<div style="overflow:auto;">
<div style="float:left;">left</div>
<div style="float:right;">right</div>
</div>
<div style="border:1px solid #cccccc;">footer</div>

Heres the result:

And with little extra styling:

<div style="background: #555555 none repeat scroll 0% 0%; overflow: auto; width: 100%;">
<div style="padding: 1%; background: #cccccc none repeat scroll 0% 0%; float: left; width: 86%;">
       Left
 
       Content</div>
<div style="padding: 1%; float: right; width: 10%;">
       Right</div>
</div>
<div style="background: #333333; color: white; text-align: center;">
   footer</div>

Heres the result:

Happy CSSing!