Clearfix

[audiopro]

I have a clearfix which clears in FF but not IE6 on a validating page. I have had it the other way round but IE6 behaving itself is a little unusual.
Any suggestions?

Keith

http://www.studiosoft.co.uk

 

[AGus01]

Please post your code or an example

 

[BillyRayPreachersSon]

This is the clearfix code I've used personally for the last few years. I've found that other solutions don't always work for me (including the one-liners that revolve around 'overflow'):

/* clearfix styles */
.clearfix:after {
	clear: both;
	display: block;
	content: ".";
	height: 0px;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
li.clearfix {
	display: list-item;
}
/* End hide from IE-mac */

I know this works in Fx2 & 3, IE 6 & 7, Opera, Chrome, Safari (3/Win, 3/Mac). I've not tested it in any other browsers.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Foamcow]

I don't tend to need a clearfix of this nature very often, certainly not one that requires different version per browser.

Generally I simply float the containing element.

If I can't do that for some reason then I'll use something like:

.clearer { clear:both;visibility:hidden; }

I find that by applying that class to an <hr> element I retain the semantic structure of my document since it acts as a divider even if visible.

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[audiopro]

I got to the bottom of it eventually and as usual I was missing the obvious, I had the clearfix set up in the wrong container so it was having no effect - duh!

Foamcow
I tried your suggestion and it worked, is that all that needs to be done, float the parent container? If so, it seems a much cleaner solution.

Keith

http://www.studiosoft.co.uk

 

[Foamcow]

Yep. If you float the container it will extend to wrap around floated content.

There are times when it's not ideal though.
When you float an element you will also collapse it's width to that of its contents. If you want your container wider then you need to specify a width. Harmless enough but when you start applying widths to things it can all start to come apart.

The clearing element (the <hr>) is often a simpler option.

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.