Fork me on GitHub

article

Clearing Floats is easy?

February 28, 2005 | Web Design & Development

Seems that there is an easy way of clearing floats, one that seems to be surprising to so many people that it is hard to beleive it is that easy.

SitePoint.com has the writeup about how adding overflow: auto; can cure all that ails ya with clearing floated objects.

They provide an example of the theory in action and it sems to work very well.

Who knew, it is easy…

5 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  • At first glance, I was like, "wtf? that doesn’t do anything unexpected."

    At second glance, I was like, "wtf? Why isn’t this better documented? It’s fantastic!"

    keen read!

    John Pennypacker, February 28, 2005 7:29 am | permalink

  • And here’s a little bit on why it works from the CSS specifications. It reads a bit like a VCR manaul to me but it might make sense to you.

    In certain cases (see the preceding sections), the height of an element is computed as follows:

    If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.

    If it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box.

    Absolutely positioned children are ignored, and relatively positioned boxes are considered without their offset. Note that the child box may be an anonymous block box.

    In addition, if the element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges. Only floats that are children of the element itself or of descendants in the normal flow are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

    So there.

    Oh, yeah, how about a link to that…

    shawn, February 28, 2005 7:44 am | permalink

  • Kick ASS. Thanks, Shawn. :up:

    joel schou, February 28, 2005 8:27 am | permalink

  • whoa. bleh~ but I still like the "wedging matchsticks" :shrug:

    Tom, February 28, 2005 10:24 am | permalink

  • Seems there is a caveat to this (I haven’t had a chance to implement this on anything yet, so this is news to me) in that in some situations you can inadvertantly add scrollbars to your layout if you have a contained element that is wider than your prescribed setup.

    Mezzoblue has a nice writeup on this.

    shawn, March 3, 2005 11:28 am | permalink

Comments are closed