CSS Floats 101

by Noah Stokes

64 Reader Comments

Back to the Article
  1. i’m not a css guru, but doesn’t ‘overflow: hidden’ simply hide anything sticking out of the containing box?

    i’ve found that using ‘overflow: auto’ usually fixes the problem for me, i think it forces the containing box to
    expand around the floated elements instead of adding extra
    markup just to clear the floated elements.

    does that not work? i’m not sure, maybe it only works if the containing box has position: relative, and not when the containing box has the default position: static.

    Copy & paste the code below to embed this comment.
  2. Floats have always seemed to be the one thing that causes me occasional grief. I could never understand why some tags worked in some cases, why ‘hacks’ were needed, and how to build simple CSS that works in all browsers. This article does an excellent job of working from the ground up with floats. The pacing of the article is spot on.

    Copy & paste the code below to embed this comment.
  3. I completely agree with @willthemoor. I’m feeling the same trouble when putting less important information higher up in the html source, just to be able to float it.

    Anyone knowing a good solution for this?

    Copy & paste the code below to embed this comment.
  4. @willthemoor – A very valid point, and something to consider when optimizing a site for search engines and/or screen readers.

    @lode – A solution for something like this would be to float both the text and the figure, more code and thought required, but totally doable.

    Copy & paste the code below to embed this comment.
  5. Check out this method which is much better (for the sake of people reading this, and still applying the old methods mentioned)

    http://www.quirksmode.org/css/clearing.html

    Copy & paste the code below to embed this comment.
  6. Nice and very useful article. I think what some people are never taught is the clear property, and how to use it. This then causes them to use excessive amounts of floating in their layout, when it shouldn’t really be needed!

    Copy & paste the code below to embed this comment.
  7. Hi, your article is a great resource, thank you for sharing. I just wondered if I can translate it into another language and put it on my site http://www.thoughtresults.com (coming soon)?
    Thanks

    Copy & paste the code below to embed this comment.
  8. I found you article very good and in depth. But in the real world I would agree with scottlepich. Overflow:hidden is my personal favourite to clear the floats by using the height of the containing div to push elements later in the DOM structure below the floats. This also helps with background colours/images such as faux columns.

    Copy & paste the code below to embed this comment.
  9. is that we still need the clearfix classes. In a ideal world, classes like the clearfix class would apply automatic. The markup also looks kind of silly because we need to use it. Divider class equals clearfix? That kind of semantic logic should be illegal IMHO. :-)

    Copy & paste the code below to embed this comment.
  10. There is another way to clear the float. If the container of floated elements have display:table, the floated keeps within the container, giving it a proper height and width.

    Copy & paste the code below to embed this comment.
  11. I tend to agree with Gunnar Bittersmann in preferring the display: inline-block method for both columnar layouts and side-by-side situations. No clearing needed, no need to worry about no height problems. I use floats only when I need text-wrapping—that’s what I think floats were designed for, and where they work best. Can you use them for columns? Sure—and I used to rely on them exclusively. But these days I think that using display: inline-block is a better technique. But thanks for the article.

    Copy & paste the code below to embed this comment.
  12. Very interesting and informative blog, it will definitely help me out in future site building.
    It’s great to see the examples too, to back up what you are trying to explain, as it’s not always easy to see what would happen in each case.
    Although I have used clear:both and overflow:hidden before, I have not always understood the reason behind why and how it works. This has cleared things up for me, and I will now be able to use them with more confidence in the outcome.

    Copy & paste the code below to embed this comment.
  13. Thanks so much – like others in this string I’ve been working with floats for years but was still murky on the finer points of clear, overflow, etc. Thanks for taking the time to walk us through them all and the examples are great.

    Copy & paste the code below to embed this comment.
  14. I’ve found a very common “trick” that usually solves floating issues in older IE browsers. By setting any floats to display:inline, it can often kick any misbehaving floaters into place – this usually comes hand in hand with overflow:hidden on the parent container.

    Another thing to consider is that it is always best to assign widths to your floated elements.

    Great article! Cheers.

    Copy & paste the code below to embed this comment.
  15. Thank you for an informative and thorough article. I am busy creating my own little mental models to help me understand CSS/html. Knowing there is a” natural flow” is illuminating! A little bit like life,really!

    alistapart is a wondrous resource…

    Copy & paste the code below to embed this comment.
  16. Well written and easy to follow – thanks.

    Wish I’d read something like this back when I was first learning about the float property!

    Copy & paste the code below to embed this comment.
  17. Its been a while since I’ve visited ALA, but I have to say that I’m pretty shocked that in 2011 there’s an article on clearing floats. These techniques are ALL more than 5 years old, and I know re-posting good techniques is very beneficial to newer devs who might not have been in the game as long as some of us, but this just feels bizarre.

    I kept looking at the article date to verify that I hadn’t stumbled across some earlier article. Float clearing with a mention of known IE6 bugs?? Links to images that don’t pop in a lightbox, forcing me to click ‘Back’? Did I accidentally hop into my time traveling Delorian without knowing it?

    Copy & paste the code below to embed this comment.
  18. While the information could be considered old news now, a good explanation is always welcome.

    Here’s a question though. Using example E2, if you increase the height of just the Blue box, how do you get the Green and Orange boxes to float up back under the Red box? Essentially you want the normal flow for 3 of the 4 <div>‘s without using absolute positioning…

    Copy & paste the code below to embed this comment.
  19. overflow:hidden and auto seem to do the job. However, I’d like to mention that using tables eliminates any of the clearing problems. Although it requires much more mark-up (which this is the reason for not using <div> with clear:both), it’s probably a safer approach, is it not?
    For example, this is Example_I, using tables instead of <div>.

    <table width=“280px” align=“center” cellpadding=“10px”> <tr> <td>
      Paragraph
      image.gif
    </td></tr></table>

    and the table contains the image instead of it floating our with <div>.

    Copy & paste the code below to embed this comment.
  20. Hi, I have read your article or tutorials… Its really awesome… I personally thanks for your all post…. Dhananjay Kumar, India

    Copy & paste the code below to embed this comment.
  21. Hi, always try to use div based layouts instead of tables ‘coz tables take lots of time at the time of loading or rendering the page.
    And slow down your website as a result. See here How to Optimize CSS

    Hope it helps :)

    Copy & paste the code below to embed this comment.
  22. I have found this article and the Positioning 101 article (http://www.alistapart.com/articles/css-positioning-101) very useful. But they seem to be different ways of achieving the same thing? So which is best for a multi-column layout? or have I missed the point of one of them. Floats seems to get the job done with less hassle…

    Copy & paste the code below to embed this comment.
  23. I’ve always been afraid of using floats because of how seemingly ‘unpredictable’ they can be but this article makes it all seem so simple!  Thanks so much for writing this!

    Copy & paste the code below to embed this comment.
  24. I agree with extravaganzasd, neither do I understand how the uncleared footer don’t end up underneath the floated elements.

    I have tried to give the footer a width but it still ends up underneath the floated element.

    Could you explain this more in detail?

    Great article!

    Copy & paste the code below to embed this comment.
  25. I agree with extravaganzasd, neither do I understand how the uncleared footer don’t end up underneath the floated elements.

    I have tried to give the footer a width but it still ends up under the floated element.

    Could you explain this more in detail?

    Great article!

    Edit: clarifying

    Copy & paste the code below to embed this comment.
  26. I have to return to question earlier put by “extravaganzasd” (page 2 post 17) and “IbanezPlayer” (page 6 post 54) because I find the answer by Noah Stoke in post 24 (page 3) not being correct, but in the same time actually right. And I think I can show it in an easy way too.
    Before doing so, let me fist say I really appreciate this article. In many ways. For one, it’s, IMO, a perfect example of what a well written tutorial/article should look like in use of language and pedagogic tools (of which humour is one and facts is another — and a third is to know how to make balance of the two former, which the author IMO really knows). Great job Noah!

    I also have to state that I’m quite new in the game of web design (and all other data related subjects as well).
    <h3>Regarding example G:</h3>According to the rule stated in the article (beneath the header <cite>“How floats behave</cite>”): “<cite>Floated elements are first laid out according to the normal flow, then taken out of the normal flow and sent as far to the right or left (depending on which value is applied) of the parent element.</cite>” you would expect the #footer to sit just beneath the #header.

    And, as far as I can see, that is actually where it sits. If you put a border around the #footer you’ll see for yourself (the borders just appears at the wright side and the bottom of the #footer, and that because the rest of the #footer is hidden under the #content and the #navigation).
    This will be even more obvious if the #content and the #navigation is moved down (for example with margin-top: 20px): Now you’ll see all sides of the #footer and its border and how it sits — just like the rule said it should – beneath the #header (the #content and the #navigation was taken out of the normal flow, etc.).

    The thing that still bothers me is that the TEXT NODE “Footer” puts it self just beneath the #navigation (and in the bottom wright corner of the #footer). 
    When looking at the HTML DOM Node Tree the text node “<cite>Footer</cite>” in the article example is a child of the #footer and I would expect it to be at the left top of the #footer, but because it doesn’t I’ve obviously missed something. 
    This behavior doesn’t change if you put the text node “<cite>Footer</cite>” in a paragraph (and it was this behavior that fist cheated me to believe that ALL of the #footer did the same, was put under the #navigation — and to the wright of #content).
    If anybody could explain the behavior of the text node in this example I would be happy.

    Copy & paste the code below to embed this comment.
  27. I have to return to question earlier put by “extravaganzasd” (page 2 post 17) and “IbanezPlayer” (page 6 post 54) because I find the answer by Noah Stoke in post 24 (page 3) not being correct, but in the same time actually right.
    And I think I can show it in an easy way too.

    Before doing so, let me fist say I really appreciate this article. In many ways. For one, it’s, IMO, a perfect example of what a well written tutorial/article should look like in use of language and pedagogic tools (of which humour is one and facts is another — and a third is to know how to make balance of the two former, which the author IMO really knows).
    Great job Noah!

    I also have to state that I’m quite new in the game of web design (and all other data related subjects as well).

    Regarding example G:
    According to the rule stated in the article (beneath the header “How floats behave”): Floated elements are first laid out according to the normal flow, then taken out of the normal flow and sent as far to the right or left (depending on which value is applied) of the parent element.” you would expect the #footer to sit just beneath the #header.

    And, as far as I can see, that is actually where it sits. If you put a border around the #footer you’ll see for yourself (the borders just appears at the wright side and the bottom of the #footer, and that because the rest of the #footer is hidden under the #content and the #navigation).
    This will be even more obvious if the #content and the #navigation is moved down (for example with margin-top: 20px): Now you’ll see all sides of the #footer and its border and how it sits — just like the rule said it should — beneath the #header (the #content and the #navigation was taken out of the normal flow, etc.).

    The thing that still bothers me is that the TEXT NODE “Footer” puts it self just beneath the #navigation (and in the bottom wright corner of the #footer).
    When looking at the HTML DOM Node Tree
    (“http://www.w3schools.com/htmldom/dom_nodetree.asp”)
    the text node “Footer” in the article example is a child of the #footer and I would expect it to be at the left top of the #footer, but because it doesn’t I’ve obviously missed something.
    This behavior doesn’t change if you put the text node “Footer” in a paragraph (and it was this behavior that fist cheated me to believe that ALL of the #footer did the same, was put under the #navigation — and to the wright of #content).

    If anybody could explain the behavior of the text node in this example I would be happy.

    Copy & paste the code below to embed this comment.
  28. “rlramirez77” has an interesting question in post #48: “Using example E2, if you increase the height of just the Blue box, how do you get the Green and Orange boxes to float up back under the Red box?”

    I’m not so sure how often you will apply this kind of layout in a daily practice, but the code principles in general, and specifically in this case, are of basic interest for me. 

    If the Pink and Blue are considered having been “taken out of the normal flow and sent as far to the left of the parent element” then you expect “”¦the Green and Orange blocks to act as if they’re not even there (the Pink and Blue)”¦”.
    So why the space that emerge (or are not filled) between the Pink bottom and Green top line? 
    All answers, tips, links, etc. are very much appreciated.
    The second question, how to get the Pink and Green touching each other, will (hopefully) be answered when knowing the answer of the first. 

    (I tested to use the inline-block method [post #15 and #41]. It has its advantages, but I didn’t manage to solve this specific issue using it. Maybe someone else? Gunnar Bittersmann or Peter Weil perhaps?)

    Copy & paste the code below to embed this comment.
  29. “ghpeel” says (post #47):
    “Its been a while since I’ve visited ALA, but I have to say that I’m pretty shocked that in 2011 there’s an article on clearing floats. ” Etc., etc.

    This piece of information could have been useful for me, being a newbie as I’m, if the sender also would have offered some of his wisdom of how it’s done today.

    So, if the methods in this article are outdated— which are the methods of today?
    I really want to know. From anyone that knows.

    Copy & paste the code below to embed this comment.
  30. Hey Noah, fantastic article.  There’s one thing I’m not understanding, however.

    When you introduce floats, you say that floated elements are removed from the normal flow, and that elements following it will be pushed up beneath the floated elements. 

    However, example G in the section “using floats for layouts” doesn’t seem to follow this rule.  In this example, the “navigation” and “content” elements are both floated.  According to what you said in the first section, the “footer” element should therefore be pushed up beneath both elements, invisible to us.  Instead, however, the footer element is pushed to the right, below the navigation element.

    Can you explain this behavior?

    Copy & paste the code below to embed this comment.
  31. Those collapsing elements can be problematic when trying to get containers to grow. I usually make sure the parent element is floated as well to encourage its growth, but it doesn’t always work when I’m playing around with some unorthodox layouts.  I’m going to adopt more clears into my life. I usually employ them after floats; never thought to use them to combat collapsing containers. Awesome article! Thanks!

    Copy & paste the code below to embed this comment.
  32. I can breath again. I’ve read many articles on floats and clear. Best lesson on clear I’ve run across. A lifesaver when having a repeating background in a container. And really helpful because it is written and illustrated in a language that novices can understand. Thanks.

    Copy & paste the code below to embed this comment.
  33. Noah thank you for the clear and simplifying way you explained floats. That said where can I get a “Bacon Loving Unicorn” that you mention?

    Copy & paste the code below to embed this comment.
  34. I just can’t explain you how much this article has helped me “clear:both;” my mind and body from understanding this issue.

    Great Article!

    Copy & paste the code below to embed this comment.