digitalRenewal » css clearing floats http://digitalrenewal.com like a breath of fresh air Tue, 10 Jan 2012 03:36:11 +0000 en hourly 1 Clearing Floats in CSS http://digitalrenewal.com/clearing-floats-in-css http://digitalrenewal.com/clearing-floats-in-css#comments Sun, 13 Dec 2009 04:12:17 +0000 Trisha http://digitalrenewal.com/?p=546 clearing floats in cssThis 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:

Left
Content
Right
footer

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:

Left
Content
Right
footer

Happy CSSing!

]]> http://digitalrenewal.com/clearing-floats-in-css/feed 3