As I told you on http://perishablepress.com/press/2009/12/06/new-clearfix-hack/ your “technique” is a really bad solution. It can only create more issues than it solves.

As you can see your markup doesn’t show. Could you publish a test case and post the URL?
You can also email me everything if you wish (my first name @tjkdesign.com)

Thanks

Shown
Hidden

…
And Css:
#wrap {
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
position: relative;
overflow: hidden;
}

#wrap div.shown {
float: left;
height: 100px;
width: 100px;
border: 1px solid #ccc;
}

#wrap div.hidden {
border: 1px solid #ccc;
display: none;
height: 100px;
width: 100px;
position: absolute;
top: 110px;
left: 10px;

}

#wrap:hover div.hidden {
display: block;
}

What basically happens is when you hover over the “wrap” element, the child “hidden” will show (Supposed to be). Using the overflow approach, unfortunately it is sort of being cut-off. Sir Mal pointed this out and I didn’t quite get the solution using “display:inline” and “width: of some sort” (No really sure). Perhaps a concrete example based on the code I’ve given will enlighten me more. Regards.

What you’re saying about content being cut-off has already been addressed in previous comments.

Also, your suggestion about demo #4 would fail to create a fluid layout as these sidebars have their width set in pixels.

“Basically any wrapper containing floats has to have clearfix applied”

Good luck with that! ;)

If your main wrapper has overflow: hidden;, what if you have any dropdowns sticking out of the main wrapper? A popover or megadropdown like in most modern user interfaces?

O yes, these get cut off, and there’s no way to fix it without removing the overflow: hidden.

People saying you have to use overflow: scroll end up with scrollbars.

In demo 4, the the 3 columns should float to the left with defined widths. The wrapper gets clearfix using the :after method for modern browsers and zoom: 1 or display: inline-block so it gains layout in IE6 (See: http://www.satzansatz.de/cssd/onhavinglayout.html )

Basically any wrapper containing floats has to have clearfix applied, and any direct child of that wrapper should float. So in the case of a wrapper div with 3 columns, the colums float; the contents of the colums do not.

There is no technique for modern browsers that comes without caveat. But when positioning elements outside of the container, it is possible to use display:inline plus “width” instead of overflow:hidden.

Yes I know about oocss. I believe I’m one of the commenters on the page you link to ;).
Please do *not* follow this link for now though because it is flagged by Kaspersky. I’ll contact Nicole.

Have you seen http://oocss.org/grids_docs.html? It’s based on formatting context created by overflow:hidden in content adjacent to floats.

Thanks again for a great explanation and sharing your knowledge. I’ll definitely have to check out EZ-CSS.

I agree with you about zoom, but if it is rarely mentioned in articles and tutorials it is because it does *not* validate.
This is why many authors prefer to use the Holly hack (height:1%;), or a width declaration.
The latter forces you to overwrite the overflow:hidden declaration, the former fails in IE < 5.5.

Thanks

I agree. As I say in one of the comments above, there is no magic bullet. For sure “hasLayout” looks really sexy when we see that all bfc triggers come with some side effects.

As a side note, there is no perfect CSS solution, but there is a HTML one… Far from being semantic (so not perfect either), but it does the job well:
http://www.ez-css.org/rapid_prototyping

Thanks for stopping by

I’m glad you find this article and its comments useful.

Thanks for your feedback

Using right/left padding on .mainContent is a technique I used to do *years* ago, but this creates weak construct as you cannot clear within that container.

“In demo 4 your margins have to be larger than the widths of the floating sidebars.”

This is by specs (nothing wrong with that). This block formatting context has its border box (*not* its margin box) fit between the two floats. This means that implicit margins are created by the browser. These margin values are equal to the floats’ margin box.
Usually, with such contructs we would apply margin to the floats, not to the block formatting context.

Thanks

I’m not sure about the need for “text-indent” in that clearfix rule. Besides, if I recall, using BR may fail in IE6.
In any case, this technique goes against the idea we’re discussing here, which is about clearing/containing floats with *no* structural markup.

Thanks

Yes, new block formatting contexts are a big deal when it comes to visual rendering, but in a good way. I find them very helpful when it comes to create layouts/grids.
See http://www.ez-css.org

Thanks for your feedback

Thanks for stopping by and thanks for this *really clever* solution.

“True to a certain extent, but with more differences than the buts and ifs shown in this article. Inline-block leaves white-space gaps”

I don’t think this issue would come into play in the case of a layout where there would be an “inline-block” following float(s).

“which (unless you tamper with the actual html) can’t be removed properly as far as I know”.

I read your article and I see that you reference a succession of elements styled as inline-block which is quite different. Besides tempering with the html (which imho is no big deal as this code would most likely be in an include), you could use the “word-spacing” property. Giving it a negative value (to be applied to the parent element) should close the gap between the elements.

Thanks for your feedback

“I’m not sure why you’re wanting *width-less* blocks.”

When it comes to construct, being able to rely on a width-less container allows to dodge problems related to rounding issues or to use padding/border with no concern for the width of the content box.
Think of creating a two column layout (50/50) or a three column layout (1/3, 1/3, 1/3); if a column is width-less it will simply fill the available space. Try 50/50 in IE6 with explicit width, you’ll see what I mean.