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 (http://www.positioniseverything.net/easyclearing.html)

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. :(