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. One little word was the key to ending my frustration. overflow. remember them well. You can use overflow:hidden, overflow:auto, or overflow:visible… play around with it to see what each does.

<div style="overflow: auto; width: 100%;">
<div style="float: left; width: 20%;">Left</div>
<div style="float: left;">Content</div>
<div style="float: right; width: 10%;">Right</div>
</div>
<div>footer</div>

Heres the result:

And with little extra styling:

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

Heres the result:

Happy CSSing!