Pressure is nothing more than the shadow of great opportunity. - Michael Johnson

Methods for Containing Floats

8 years, 2 months ago

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:

Screenshot before clear fix applied 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.

Floating an image in two paragraphs View Source

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

floating an image in two paragraphs - shown with border around each paragraph 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 the backslash 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

Comments

  • Finally! An article that trully and simply explains the "whys" (and even better!! all the whys!!) for something that has happened a lot of times during my work and which I always had to find ways around. Great post overall!

    artikboy - 25th September 2006 #

  • And, missing in your last example (floating the container) it becomes very hard to center the container. Floats don't react to {margin:0 auto} which would be the preferred way.

    Michiel - 25th September 2006 #

  • Great article, explaining the reasons for these errors...

    Thanx!

    Carlos Eduardo de Souza - 25th September 2006 #

  • @Michiel - you're absolutely right, thanks for pointing this out. The floating method does have its problems and is also the only one which isn't self contained. You can't simply drop the container block into another section of code without thinking about what surrounds it.

    Ed Eliot - 25th September 2006 #

  • Before reading this I would just use the "Clearer DIV Method" and I agree it isn't a nice solution because of the unnecessary markup it ads So thanks for the great article.

    Groningen - 26th September 2006 #

  • Here's one I learned. Set "display: table; width: 100%;" PC IE6 and Firefox friendly, though safari starts getting weird when you get to adding padding to it.

    Justin - 26th September 2006 #

  • Is it me, or is this post basically a summary of http://complexspiral.com/publications/containing-floats/ ?

    Eric Meyer - 2nd October 2006 #

  • Hi Eric - thanks for stopping by. Obviously we're both looking at the same problem, as are many others, but your article only explains two of the methods described here (missing the easy clearing and overflow methods). I've also tried to go further by implementing a rule vs browser support chart to hopefully help people understand which parts of each method effect each browser. This would also allow one to mix and match rules to create a custom clearing rule set.

    Ed Eliot - 2nd October 2006 #

  • I sure hope that's someone POSING as Eric Meyer. I'd hate to think the real Eric Meyer is so arrogant as to assert that his 3-year-old tutorial is The Last Word on floats.

    Marla - 8th October 2006 #

  • @Michiel - Another alternative is to set "body {width:780px; margin:0 auto;}". This will center the content, and enable you to float you container div. And, of course, you can set the width of the body to whatever you want. And you don't need an extra container to achieve the desired result.

    Jeremy - 11th October 2006 #

  • Hi, never understood the use of the period in the pseudo-element (it's not a class)

    :after

    .

    The following is totally sufficient:

    div:after {
    display: block;
    clear: both;
    content: " ";
    }

    You don't need to set visibility and won't pollute your page with periods.

    Klaus Hartl - 13th October 2006 #

  • From what I take away from this article, despite the extra DIV, its still better to use the first, tried and tested clearer div method. I cant responsibly use css hacks in the sites I create for clients because then when a new browser comes out they have a broken site and have to pay for support. And also i've never understood why everyone gets so persnickety about extra div tags in documents as they have absolutley no detremental effect in any browser, for mobiles, disabled people, old browser software, etc.

    rtpHarry - 2nd November 2006 #

  • Thank you for this compendium! I've found the overflow method to be the best one. To answer rtpHarry, using any of the other methods in moderately complex layouts is delicate, lest you clear out of the various left- and right-floated columns.

    Tobia - 5th December 2006 #

  • I've been looking at this problem for some time. It all depends on what works for a layout. I would go with either the FnE method (Float Nearly Everything) or the Clearing method for more complex layouts and ensuring browser compatability (safe route). One way I've done it is with an hr, as suggested by Eric Meyer. Semantically, I would say this is preferrable over a div or br with a   inserted. To combat IE's forcing of vertical space, put a conditional statement to use negative top and bottom margins. Also, the space at the bottom of the float could be a little flexible, so it worked just fine for that case. Also, I just had to make a seriously complex layout... I used both methods of FnE and Clearing.

    MarkStar - 20th January 2007 #

  • By the way...this is help on the way eventually:

    http://www.w3.org/TR/2002/WD-css3-box-20021024/#the-clear-after

    MarkStar - 20th January 2007 #

  • Congratulations. This is the best summary I have read on these various clearing methods, and your browser charts are indeed useful.

    Please keep this page up, and updated, as it is a truly valuable resource.

    Well done!

    Tuttle - 25th April 2007 #

  • this is great, very helpful. thanks!

    Michelle - 26th April 2007 #

  • Thanks for your great explanation about floats.

    Martin - 4th May 2007 #

  • Tuttle, Michelle, Martin - thanks for the feedback. I'm pleased the explanation was helpful.

    Ed Eliot - 5th May 2007 #

  • Yes, i found the easy clearing method also very useful.

    Thank you.

    Del - 26th May 2007 #

  • Is there any merit to using one of these in your html?

    I then write a css rule that makes sure all brs have no height.

    Seems to be working across all browsers.

    Brad - 27th May 2007 #

  • Sorry, the missing pieces is in brackets...

    br clear="all" /

    Brad - 27th May 2007 #

  • This is fabulous - I've spent a lot of time scouring the forums and CSS sites and I haven't found any article as helpful as this. The overflow:auto method allowed me to expand my container while keeping it centered, unlike the clearfix method which requires the container to float right or left.

    Priceless!

    Berkleigh - 1st June 2007 #

  • Thank you!!!

    oh god... this float think almost have me quit css for good... really saved my day..

    Bac0n - 5th August 2007 #

  • Stumbled across this article today as I was struggling with this exact problem. Your suggestions worked flawlessly! Thanks.

    Jon Gale - 6th November 2007 #

  • Re: Brad "I then write a css rule that makes sure all brs have no height."

    You really shouldn't be adding extra markup to contain floats. What if you won't need clearing in certain place, but a real . What if later you decide that in that one spot where you cleared with markup you'd rather have it not cleared. Sure, if you have a 4 paged site and decide to add 5th one it will be snap to edit something and then check that the other 4 look good, but what if your site has 1000 pages with 100 different templates?

    The point of CSS in the first place is to separate content from presentation.

    I can't think of a test case where you'd _have_ to use extra markup. Although, I may say that I've seen some IE bugs where some extreme hackery would be required.

    A rule of thumb in choosing the method to contain your floats (considering each have drawbacks and can't be used in every possible situation) is:

    Overflow => .clearFix (aka EasyClearing aka :after method) => Float on the container => extra markup (aka "clearing div" or "br") and I am happy to notice that this great tutorial lists them in such order.

    Great tutorial, I hope the link is permanent 'cause I am linkin' :)

    Zoffix Znet - 15th December 2007 #

  • s/, but a real//; # thought jumps :)

    Zoffix Znet - 15th December 2007 #

  • thanks a lot .. just started learning css and was stuck with child elements within parent.. and this link just resolved my issue.. thanks again

    rohan dey - 18th May 2008 #

  • Just found your article/site while trying to fix this problem. A wonderfully comprehensive list of possibilities. Thanks so much.

    david - 26th May 2008 #

  • Merci pour cet article, il est très explicite et très clair.

    En ayant lu la totalité de celui-ci, je crois que j'ai vraiment appris quelque chose. :)

    Cordialement.

    Foufi - 19th June 2008 #

  • For years I wondered how to fix this. The extra DIV is the answer (I don't care if it's an extra tag, being *that* picky can't be good for your health).

    Thanks a lot!

    spunky - 16th July 2008 #

  • Awesome article, but I have a question. Is there a way to do exactly what you're doing, but with three columns instead of two?

    Jesse - 4th August 2008 #

  • Thanks for the article!!

    I've been struggling with ie6 for a few hours...

    'width: 100%' saved my layout!

    Alex - 7th November 2008 #

  • Workaround following.

    As I needed co contain within floating elements (clearing would clear all elements thus would be below) I couldn't use the Easy Clearing Method (neither clearer) so I used the much practical Overflow Method. Although there was an issue with it : sometimes the content was (oddly) a small fraction larger than its container thus creating a scroll bar, which is undesirable.

    I simply added the following CSS line after its corresponding example counterpart : #container { overflow: hidden; }

    On a personal note, I'm with the author choosing zoom: 1 over width: 100% as it causes less complications, which are a real pain down the road then you forget about this part.

    William Carrier - 5th January 2009 #

  • I just spent 3 hours trying to figure out why my container would not extend to fit my nested two column layout.

    This post solved it for me, thanks, thanks, thanks.

    Ben - 3rd April 2009 #

  • This is an awesome post. I just want to thank Ed for the clarification, I will advise this page as much as I can.

    Andrea - 8th April 2009 #

  • Two things I wanted to mention: 1) IE8 does not need "layout" (http://haslayout.net/haslayout) to be set in order to contain floats.

    2) Clearer elements, like are virtually never needed; the only time I find a need for them is in either a very dynamic page or when IE6 doesn't want to play nice.

    Cheers, Zoffix Znet

    Zoffix Znet - 16th August 2009 #

  • Glad we can all forget about IE5 now.

    bucabay - 24th February 2010 #

  • Thanks for a well written and very useful post.

    I've stopped developing at all for IE6 now, not worth adding code specifically for a browser that has such poor standards support and increasingly little use these days.

    Jamie Buchanan - 8th April 2010 #

  • Thank you, thank you! I spent 2 or 3 hrs trying to solve this problem, and your first solution did the trick for me. I appreciate it!

    Jody - 19th August 2010 #

  • I was getting hung up on this problem, and you offer a number of solutions to fix it. My solution was rather pathetic... because I was floating the container block, but not doing a clear:both to the div below it. I was getting suboptimal results.

    Rockmeamadeus - 22nd September 2010 #

  • Thanks for posting such a nice and very useful clearing method.

    Ashok - 7th March 2011 #

  • THANK YOU!!! this helped me greatly

    Evan Larsen - 23rd March 2012 #

  • Great article. Sadly, browsers still don't know how to properly render floats in 2012 :(

    Jonathan Weatherhead - 10th May 2012 #

  • Thank you so much!! This article was incredibly helpful!

    Manuel - 31st May 2012 #

  • Very grateful for the hr solution - thanks!

    Ymi - 2nd August 2012 #

Help make this post better

Notes: Standard BBCode for links, bold, italic and code are supported. rel="nofollow" is added to all links. Your email address will never be displayed on the site.

Back to index