Methods for Containing Floats

http://www.ejeliot.com/blog/59

Entry updated 24th September 2006: added browser support tables and made minor corrections.

Floating elements within a container can be frustrating if the container has a background image, colour or borders. You'll mostly likely have seen something similar to the result shown below:

View Source

The parent container doesn't stretch down to enclose its children. The W3C recommendations specify that this is correct behaviour. But why? It certainly looks wrong. If you're using Internet Explorer 6 or below and have applied a dimension (width or height) to the container you'll wonder what all the fuss is about - it seems to behave the way we want it to.

Lets take a look at another example. This one contains two paragraphs of text and an image which has been floated left. As we'd expect the text wraps nicely around the image.

View Source

Nothing strange here, but lets look at the same example with borders applied to each of the paragraphs.

View Source

Notice how the image appears to drop out of the bottom of the first paragraph. Without the seemingly strange behaviour we witnessed previously it would be impossible to make the text wrap effectively around the image.

This is all well and good but what if this really isn't the behaviour we want? Fortunately there are a number of methods we can use to force the container to enclose its floated children.

Clearer DIV Method

Probably the simplest and a popular solution is to add an extra DIV with the style clear:both below your floated elements. I don't like it though, it adds unnecessary markup to your page which is associated with presentational display.

Supported Browsers

IE 5.0	IE 5 Mac	IE 5.5	IE 6	IE 7	Firefox 1.5	Opera 9	Safari 2
Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes

View Example

Overflow Method

Adding overflow:auto to your container element will also achieve the desired effect. For IE 6 and below you'll also have to add a width or height to the container to force hasLayout. In this example I use width:100%. If you're concerned about Mac IE you'll have to use overflow:hidden rather than overflow:auto as with overflow:auto it always shows scrollbars.

If you're not concerned about supporting IE 5.0 or Mac IE then the proprietary zoom property (zoom:1) might be a better bet than width:100% although it does mean your CSS won't validate.

Supported Browsers

IE 5.0	IE 5 Mac	IE 5.5	IE 6	IE 7	Firefox 1.5	Opera 9	Safari 2
Yes (width: 100%;)	No (but works with overflow:hidden)	Yes	Yes	Yes	Yes	Yes	Yes

View Example

Easy Clearing Method

In standards compliant browsers this method makes use of the rarely used pseudo :after class to append a single "block level" full stop after your floated child elements with a clear:both rule specified which forces the container to stretch down to enclose its children. The full stop is hidden from view using visibility:hidden and height:0 ensures it takes up no vertical screen space. This technique is the CSS equivalent of the "Clearer DIV method" described above.

For Win IE, which doesn't support this class, an additional height:1% rule was originally added to trigger hasLayout. This was hidden from other browsers using the star html hack and, in the case of Mac IE thebackslash comment hack. With the imminent release of IE 7, which no longer treats width and height as if they were min-with and min-height, specifying this rule is harmful.

Fortunately toggling the display property from inline-block to block triggers hasLayout and forces the container to enclose its children in IE 5.5, 6 & 7. This doesn't work in IE 5.0 so we need to keep the height:1% rule but hide it from IE 7 using the underscore (or alternatively star html) hack. Some examples use "zoom" to trigger hasLayout in IE but this property isn't supported in IE 5.0.

Switching to display:inline-block does the trick for Mac IE but the second part of the toggle, switching back to display:block needs to be hidden. This can be done using the Mac IE backslash comment hack.

Supported Browsers

IE 5.0	IE 5 Mac	IE 5.5	IE 6	IE 7	Firefox 1.5	Opera 9	Safari 2
Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes

View Example

If you're not concerned about supporting Win IE 5.0 and Mac IE the example can be written more simply. At a first glance you might be tempted to combine the #container { display: inline-block; } and #container { display: block; } rules into one line but you'll find the clearing effect stops working if you do.

Supported Browsers

IE 5.0	IE 5 Mac	IE 5.5	IE 6	IE 7	Firefox 1.5	Opera 9	Safari 2
No	No	Yes	Yes	Yes	Yes	Yes	Yes

View Example

Clearing with Additional Floats

Adding a float:left or float:right to the container DIV will also force it to contain its children. This method does have a couple of drawbacks. Firstly the container will "shrink wrap" to the size of its child elements. This means you may need to add an explicit width to maintain the original width of the container. Secondly you'll have to add a clear rule to any element immediately following the container in the source.

Supported Browsers

IE 5.0	IE 5 Mac	IE 5.5	IE 6	IE 7	Firefox 1.5	Opera 9	Safari 2
Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes

View Example