Clearing Floats: The FnE Method

When it comes to laying out pages in CSS/XHTML, I have always leaned towards the float method rather than position. But there’s always that issue of clearing your floats. It wasn’t until recently I discovered a little trick to avoid extraneous markup for the sole purpose of clearing floated elements. I call it the Float (Nearly) Everything Method.

Below is an example of a floated div inside another div, the floated element containing more content than its parent.

Note: I am using inline styles for this example, so feel free to peek under the hood to see what’s going on.

border:1px solid #333;
width:300px;
background:#EEE;
float:left;
display:inline;
margin-right:20px;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin elementum consequat nulla. Proin pulvinar luctus magna. In molestie, arcu at posuere lacinia, leo dui bibendum augue, sit amet ultrices lacus diam id purus. Pellentesque ac arcu in tortor consectetuer ullamcorper.

border:1px solid #666;
width:700px;
padding:20px;

Praesent ut nulla non lorem sagittis vehicula. Nulla sed felis. Phasellus purus. Ut blandit enim ac ipsum.

What you will see in most browsers (save IE) is the content in the child div flows over the parent. But watch what happens when I add a simple float declaration to the parent div.

border:1px solid #333;
width:300px;
background:#EEE;
float:left;
display:inline;
margin-right:20px;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin elementum consequat nulla. Proin pulvinar luctus magna. In molestie, arcu at posuere lacinia, leo dui bibendum augue, sit amet ultrices lacus diam id purus. Pellentesque ac arcu in tortor consectetuer ullamcorper.

border:1px solid #666;
width:700px;
padding:20px;
float:left;

Praesent ut nulla non lorem sagittis vehicula. Nulla sed felis. Phasellus purus. Ut blandit enim ac ipsum.

Magic. The floated parent div expands to enclose the floated child div.

The result of this, however, is that the ‘grandparent’ element of the nested div will not expand to enclose the parent element, unless it too is floated, or there is another element beneath it given a clear declaration. Hence the naming of this method, Float (Nearly) Everything.

In almost all my pages I use a div#wrapper to encase all the content. Many times this is centered, so floating that element is out of the question. However, anything inside it is usually fair game, unless I know there aren’t going to be any floated elements inside it. Typically, the only place I usually don’t have floats is in the footer of the document. So, I can simply add clear:both; to the #footer, and float everything else inside the div#wrapper.

View the Demo

So there it is. Clearing floats with no extra markup in the XHTML document. Sure, it takes a little more tweaking, and maybe a few CSS hacks, but at least all the presentation data is left in the CSS file, and no <br class="clear" /> in sight.

Post and Author Info.

Published October 26, 2004 by:

This article is tagged with , , , and .

Commenting is currently off for this post.
So far there are 34 comments.

34 comments

  1. Have you seen this? Position is Everything : How To Clear Floats Without Structural Markup

    Simon Proctor Simon Proctor

    October 26th, 2004

  2. Simon, I have seen that, and it also seems to be a reasonable solution. There are more ‘browser-specific’ hacks in that version, I’m just offering another way to get it done.

    Steve Smith Steve Smith

    October 26th, 2004

  3. one thing that comes to mind when using float and clear is the min-height hack ( I think the word “hack” is ill-used here) written by Grey over at

    Grey’s website. I’ve used this a dozen times when I need to clear the page for my footer.
    Hopefully min-height will be out sooner than we hope for IE, but I doubt it.

    Good tut.

    Dustin Dustin

    October 26th, 2004

  4. hey Steve,

    Thanks for the tip… It’s nice to see another alternative to producing the cleared effect so many of us have trouble with. I’m not a fan of adding extraneous tags to clear elements, so this is a welcomed technique to my CSS arsenal! ;)

    I’ll be sure to keep this in mind for my next project!

    Frank Manno Frank Manno

    October 26th, 2004

  5. Yep, I’ve also recently adopted the FnE method (nice name!). It works great for me, and I definitely intend to continue using it rather than position, which is what I have mostly used in the past. I’ve turned over a new leaf. :)

    Jeff Croft Jeff Croft

    October 26th, 2004

  6. One question I have. I peaked a bit (under the hood) on the demo and noticed that the #header is separate from the #content block. They are both (ironically) floated, but why does the #content div fall underneath (clear) the #header? Is it because, naturally, < div > is a block element? Or is it because the 90% width caused it to fall under? Or is that just the trick I’m missing…the fact that by floating almost nearly everything, it just does that? Does float automatically clear?

    Maybe I’ll just go hit up the W3 and read the fine lines on Float. Either way, some clarity would be cool.

    Dustin Dustin

    October 26th, 2004

  7. Well, actually, your right on both points. Specifying the width to the large floated elements (such as #header and #content causes them to take up the entire width of the containing div, requiring the next element (which should be either floated or cleared) to fall underneath it. It’s just utilizing the trick of “floats expanding to encase nested floats,” and then making adjustments to other elements to compensate. On a big scale.

    Steve Smith Steve Smith

    October 26th, 2004

  8. makes a bit more sense. in that case, what if the width didn’t fill the whole gap? would it still clear? I suppose I didn’t specifiy what I meant. My bad (you answered my question, but I didn’t ask the right one).

    say you have
    &lt;div&gt;<br /> &nbsp;&nbsp;&lt;div style=&quot;float:left&quot;&gt;hibidy&lt;/div&gt;<br /> &nbsp;&nbsp;&lt;div style=&quot;float:left&quot;&gt;hoo-bla&lt;/div&gt;<br /> &lt;/div&gt;
    Does the bottom floater always clear the one above it (even without clear:left)?

    Also, just to throw in a page that had a little something to do with this entry, I laughed when I saw this page > Floats are everywhere which gives some troubleshooting advice on floats. Thought it would be humerous. :)

    Dustin Dustin

    October 26th, 2004

  9. Here’s the general rule on floats: they will always want to line up next to each other, unless there’s not enough room in the parent element, then they will wrap below. That’s why the div#focus and div#menu line up beside each other, because their combined width is 99% (1% left for browser breathing room), or less than the width of the container element. If the combined width were more, the elements would flow to the next line just like words do in a word processor.

    Steve Smith Steve Smith

    October 26th, 2004

  10. I’m going to attempt to add these up correctly

    #focus {<br /> &nbsp;&nbsp;width:50% !important;<br /> &nbsp;&nbsp;width /**/:60%;<br /> &nbsp;&nbsp;padding:5%;<br /> &nbsp;&nbsp;border:1px solid #F90;<br /> &nbsp;&nbsp;float:left;<br /> &nbsp;&nbsp;display:inline;<br /> &nbsp;&nbsp;margin-right:5%;<br /> }</p> <p>#menu {<br /> &nbsp;&nbsp;width:24% !important;<br /> &nbsp;&nbsp;width /**/:34%;<br /> &nbsp;&nbsp;padding:5%;<br /> &nbsp;&nbsp;border:1px solid #F90;<br /> &nbsp;&nbsp;float:left;<br /> }

    #focus = 50 + 52 + 12 + 5 => 67

    #menu = 24 + 52 + 12 => 36

    103…

    Am I adding wrong?
    How do you add up the box model? It’s confusing because your code works, but doesn’t line up with the numbers…

    Dustin Dustin

    October 26th, 2004

  11. Dustin, I think what’s going on is that you’re mixing up your units in your measurements. The widths are in percentages, while the borders are in pixels. The percentages add up to 99%, so as long as the 4px are less than 1% of the width (or a total browser width of 400px) the floats will still display next to each other. However, get the width less than 400px, the div#focus and div#menu will end up wrapping.

    Steve Smith Steve Smith

    October 26th, 2004

  12. I was just working on something where the element below was coming in because I was not able to clear the inline element’s float properly earlier today. And now this? great! Thank you.

    I am suprised however that display: block; and width: 100%; don’t disallow the next object from moving around the floated object.

    Jeff Wheeler Jeff Wheeler

    October 26th, 2004

  13. &lt;sidenote&gt;it was a long day at work. I’ve been head deep in database development, now I’m looking at floats.
    &lt;/sidenote&gt;

    My posts here are done (for this particular tut). You’ve been awesome and a great help. I’ve got this small tut bookmarked for future use.

    I should have noticed the fact that the percentages and pixel borders were crossed.

    Blessings,
    Dustin

    Dustin Dustin

    October 26th, 2004

  14. one thing that comes to mind when using float and clear is the min-height hack ( I think the word "hack" is ill-used here) written by Grey over at</p> <p>Grey's website. I've used this a dozen times when I need to clear the page for my footer.<br /> Hopefully min-height will be out sooner than we hope for IE, but I doubt it.</p> <p>Good tut.

    There is one bug when you select all div’s, the problem is that clear div witchone is on bottom showed up and display 1px bottom border.

    Hamster Hamster

    October 28th, 2004

  15. i haven’t seen that border that you’re talking about…
    are you referring to the min-height I posted?

    Dustin Dustin

    October 31st, 2004

  16. fogive for me being a beginner at using CSS/XHTML to do my sites without tables and validating with xml 1.0 strict.

    but a way that i did it, on my first site im doing with no tables and using CSS is the min-height, which works in all but dang IE, and then a hack to get IE to do “min-height”

    #bodyContent {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
    width: 760px;
    min-height: 300px;
    position: relative;
    }

    * html #bodyContent {
    height:300px
    }

    that seemed to work for me just fine and works in every browser ive looked at (mozilla, ie, firefox, avant, opera).

    Jason Jason

    November 1st, 2004

  17. Jason – The min-height method will work if you know exactly what size the containing content will be. However, in the real world of development, that doesn’t happen too often. The FnE method allows for any quantity of content to be placed in any container. The parent divs will simply expand to hold it.

    Steve Smith Steve Smith

    November 2nd, 2004

  18. steve, that is very true. I never thought of it that way. again, sorry for being the newbie i am. I guess in my use on my first site, I just happened to know how big it would be already. thanks

    Jason Jason

    November 2nd, 2004

  19. I would just like to add a small tip for anyone: the min-height solution of Dave Shea. No extra markup needed. And a lot of interesting discussion after the article. A better solution, IMHO, than the one on grey which requires at least one extra useless tag.

    matthijs matthijs

    November 23rd, 2004

  20. Slick result and cleaner code. Well done. Not sure why everyone keeps talking about the min-height thing. Different bird, different forest.

    Alex Alex

    February 20th, 2005

  21. Has anyone else had problems with this method causing your text to over-run its parent and/or grand-parent elements?

    Example: Footer has UL for sub-menu. When Footer is coded to clear:both, it hides the master parent and grand-parent containers for all of the content, without throwing any other content out of order or causing disruption.

    Would prefer this solution, but sadly is doing the job right now :(

    David David

    March 18th, 2005

  22. I meant to say that the br class=”clear” tag is doing the job.

    David David

    March 18th, 2005

  23. This method works fine, as well as some other’s I’ve tried, but there is a minor problem – in IE if you try to scroll using the middle mouse button – (push-middle-button + drag down/up) it won’t work… Couldn’t find a solution for it.

    murzilla murzilla

    June 8th, 2005

  24. sorry, everything works.:)

    murzilla murzilla

    June 8th, 2005

  25. Thanks for the idea. Do you save yourself some effort in floating everything inside your div#wrapper by just writing “div#wrapper * {float: left;}”? Adding “clear:both;” for the few elements you want to clear? Or would this not work?

    Jason Pearce Jason Pearce

    July 12th, 2005

  26. i tried your code, you did a good job! i have a question though. i added a background-color on the parent div (container), and for some reason when i applied the float:left hack, the background-color did not work. know anything about this? tried the code in firefox.

    bonjing bonjing

    July 13th, 2005

  27. How about this? Adding a ‘overflow:auto’ to the outer DIV does the trick.

    http://www.sitepoint.com/blog-post-view?id=238086

    laco laco

    July 13th, 2005

  28. That’s what I’ve been doing for the last couple of years, I guess I should have wrote about it to have my name associated with this trick. I actually didn’t think this was such a big thing, I thought everybody was doing that but I guess it explain why so many people had problem with floats.

    Nice article by the way.

    Stephane Stephane

    July 23rd, 2005

  29. To avoid you can use . It is semantically correct, visually appealing without styles and just makes sense.

    I think is very underused. If we, designers, stop using it, w3c will deprecate it. I’d hate to see it go.

    Ottawa Ottawa

    July 25th, 2005

  30. Great ! I need some more.

    George George

    August 2nd, 2005

  31. hi! i find you ste very nice and useful http://celebrex-.gameday.de

    lilia lilia

    September 4th, 2005

  32. Hi! just want to ask if anyone knows how did yahoo mail overlap a float over another float? thanks.

    Timothy Timothy

    September 6th, 2005

  33. Find you Guy’s very helpful with your posts concerning CSS Layouts. Better than any book out there, as I do this for my own website and work on a changeover from tables to CSS and XHTML to minimize page size and control. Had some difficulties to get the pictures lined up properly with text. http://www.finaltouchinteriors.com

    Anton Anton

    October 1st, 2005

  34. Very nice site. It`s a pleasure to surf in.

    Zovirax Zovirax

    October 7th, 2005