CSS Best Practice #3: Clear Floated Containers (with Height||Width and Overflow)
Posted on | December 7, 2008 | 7 Comments
I know you’ve done it before. I think we’ve all done it. You have a container with a floated element inside. The container doesn’t wrap around everything, thus causing the element to break outside of the container. To fix this, we’d usually add a clear element at the bottom of the container so it would wrap everything within. But there is a better solution, which uses two CSS properties. For this example, I’ll place the styles inline.. please don’t hate me.
If you want to just get to the better solution…
The Example
1 2 3 4 | <div class="container" style="border:1px solid #000;">
<img src="something.gif" height="50" width="50" alt="Alt img txt" style="background:green; float:left;" />
<p style="margin:0;">Text inside the container div.</p>
</div> |
Proceeding with the example, div.clear is placed at the bottom of div.container, which solves the problem. Div.container’s border now wraps all the elements within.
1 2 3 4 5 | <div class="container" style="border:1px solid #000;">
<img src="something.gif" height="50" width="50" alt="Alt img txt" style="background:green; float:left;" />
<p style="margin:0;">Text inside the container div.</p>
<div class="clear" style="clear:both;"></div>
</div> |
The Better Solution
But why should we even bother placing an extra element? It’s not sexy. Here’s the solution: Use height:1% or width:100% and overflow:auto||hidden on div.container. Height and width on div.container would set the hasLayout property in IE, thus fixing a slew of float/box-model bugs (more on hasLayout). Overflow auto or hidden tells div.container to wrap everything within it.
Note: This won’t work if the element is floated, which would cause it to shrink to the percentage height or width.
The HTML
1 2 3 4 | <div class="container" style="border:1px solid #000;">
<img src="something.gif" height="50" width="50" alt="Alt img txt" style="background:green; float:left;" />
<p style="margin:0;">Text inside the container div.</p>
</div> |
The CSS
1 | div.container {height:1%; overflow:hidden;} |
Comments
7 Responses to “CSS Best Practice #3: Clear Floated Containers (with Height||Width and Overflow)”
Leave a Reply
December 7th, 2008 @ 6:22 pm
I remember recommending the first fix for a bug at work. Thanks for totally crushing my one inspiring moment of the day.
December 8th, 2008 @ 1:20 am
@Steven
I’m… sorry? Well, I still see the first fix around, but now you know better.
December 8th, 2008 @ 1:53 pm
Sometimes you just can’t specify a width or height. In these cases,use zoom: 1; to evoke hasLayout in IE (although not valid CSS).
December 8th, 2008 @ 5:19 pm
@Christoph
Pfft, like valid CSS in IE matters
.
Conditional comments ftw!
December 8th, 2008 @ 6:00 pm
@Jarryd: Totally agree with you. Web standards are a must, but not to the point at which they start to hinder the implementation of advanced designs- and interaction techniques. So if there’s e non-standard workaround for some stupid IE bugs, let’s embrace it and forget about the rest.
December 9th, 2008 @ 5:22 pm
thx for teaching me this before leaving cnet. used it on animevice to great effect.
December 23rd, 2008 @ 11:45 pm
@Christoph and @Jarryd:
Thanks for your input. I believe it’s all personal preference. If anything I would use invalid techniques/methods as a last resort. So yes, I could use zoom:1 to evoke hasLayout, but I would first exhaust all other methods.
@Maxwell:
Hey, I’m glad it was helpful! Awesome work with Animevice btw.