Interesting method to fully enclose a floated element within another (edited???)

[DJRobThaMan]

Hi everyone,

I found an article on this and it looks like a great method but uses a lot of hacks.

It started off with this:

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

and then quite a few other hacks.

Source Article Here

I'm sure whoever wrote is a million times better at this stuff, but is there any reason something like this wouldn't work

.outerDiv
{
     padding-bottom: -1px;
}

.clearfix:after
{
    content: "."; 
    display: block; 
    height: 1px; 
    clear: both; 
    visibility: hidden;
    overflow: hidden;
}

Douglas

[toicontien]

Two browsers come to mind in which this could fail. IE5-Mac does not stretch block elements to encompas floated elements, and it also does not support the content CSS property. So the above method of clearing a float absolutely fails in IE5-Mac. If you're not supporting that browser, as it's used by an extremely small fraction of 1% of users, then it's not a bad method.

The other big question is if IE7-Win supports the content CSS property. I don't think it encompasses floats like IE5 and 6-Win do.

[NogDog]

I don't think IE6 even supports the :after pseudo-element, let alone the content attribute.

[DJRobThaMan]

I don't think IE6 even supports the :after pseudo-element, let alone the content attribute.

It doesn't, but that's okay because it encloses the float automatically (I think) .

Also, the article claims that once display: inline-table; is applied to the style for the clearfix class in IE MAC then it should work in that browser.
There is no way to do that without a hack, is there.