Garrick Cheung » clear float http://www.garrickcheung.com Sharing what I know and learn about CSS, MooTools, Javascript, PHP and etc. Fri, 30 Sep 2011 05:16:10 +0000 en hourly 1 http://wordpress.org/?v= CSS Best Practice #3: Clear Floated Containers (with Height||Width and Overflow) http://www.garrickcheung.com/css/css-best-practice-3-clear-floated-containers-with-heightwidth-and-overflow/ http://www.garrickcheung.com/css/css-best-practice-3-clear-floated-containers-with-heightwidth-and-overflow/#comments Mon, 08 Dec 2008 01:00:21 +0000 Garrick http://www.garrickcheung.com/?p=217 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;}
]]> http://www.garrickcheung.com/css/css-best-practice-3-clear-floated-containers-with-heightwidth-and-overflow/feed/ 8