AWESOMENESS =D

What a way to start 2009 =) thanks mate !

For overflow: auto, I wouldn’t say “flawlessly”. If you have a div of a set height, with complex positioning of elements inside, you could also exceed the set height and generate scroll bars. I did this with a header section containing many floated elements - if the items were not precisely in their spots, now I don’t remember the details, but they would exceed the defined height of the container and we’d get nasty scroll bars for the just the header.

Now, this overflow: hidden working the same way is fascinating. That would have eliminated that problem. I’ll have to run a test case and implement that.

Dan Cederholm discussed this very method when going over the E section (“Easy-clearing floats”) of his talk at this year’s An Event Apart. I didn’t document it in my notes but I recall it in his slides.

He also remarked about using the class name “blockgroup” rather than clearfix - less scary hehe.

@Kevin - No problem(:

@Jen - Yeah, I’ve been using hidden for everything because if something borks up, it just gets cropped instead of having scrollbar madness. But, I would say that a container with a fixed height is probably going to be better served with the easyclear, just because of the propensity for things overflowing the box. I remember Cederholm talking about that. The different classname was a good idea.

If you don’t like using the hack for IE6 then you a width will also have the same effect so in most cases you can get away with just adding width: 100%; to the container which will have the same effect in all browser.

Essentially the problem IE has is setting haslayout so as long as you satisfy this problem with one of these methods (Haslayout solutions), then you shouldn’t have any problems or need to use the IE hack (although some cases may require it depending on how you’re dealing with the box model).

Hope that helps :)

@Dave - good call. I should have clarified that you can use whatever hasLayout hack you’d like. That’s just the one I’ve used the most in the past (although I’m starting to warm up to zoom:1 a little more

I love zoom:1 as well to trigger hasLayout… if you use an IE6 conditionally commented out stylesheet, since it’s not valid CSS.

My bilk with IE6 is that if it refuses to follow the rules in rendering, then I don’t have to follow the rules to make it behave (if I have to make it behave, mind you). So hide it in a conditional comment so that none of my happily rendering browsers have to be sad while parsing through my CSS.

THANKS! This was exactly what I needed.

Hey all,
I like everyone found this technique really useful, however I’ve come across a problem, that I’m interested to see if people have the solution to. I have a navigation bar made up of floated left list elements, this list is within a container div, i used the overflow hidden technique to clear the float, works like a charm. Here’s the problem on rollover my nav has a suckerfish type subnav. Because of the overflow:hidden the subnav no longer displays, as the container div appears to hide the subnav when it becomes a visible DOM element. Any ideas?

Dan

@Dan,

In that sort of situation, using overflow:hidden or overflow:auto just won’t work. I’ve run into a few of those situations. Basically any time you’re going to have overflow (on purpose), it’s not going to work. In these situations, I use the easyclear method for those specific elements. That works like a charm, and there’s a limited amount of elements that require it (i.e. elements that have overflow).

Just tried it and I know it works.  But I wanted to see what would happen if I put an absolutely positioned item in the containing element, and sure enough, some problems occurred.  It doesn’t matter if you use overflow:auto; or overflow:hidden; on the containing element.  If you have an absolutely positioned item within that containing element, and the absolutely positioned item that goes outside of that containing element, then it cuts it off.  So, the fix works, but will cause problems for absolutely positioned elements within it that overlap the containing element height and width.

Hey @Spencer, thanks for stopping by. I addressed that above; in those situations I use easyclear. And while those situations obviously exist, I’d say they’re much less common than a normal container that doesn’t have any overflow, but has some floats. Both are good tools to keep in your stylesheets.

Thank God for you my man.
I’ve been breaking my head over this for the past couple of hours!!!

Overflow hidden has one problem. If we have popup in that div and some of that part is coming outside the range of overflow hidden div those part of popup will not show.