Clearfix question 1

[audiopro]

I am trying to understand the clearfix solution to floated divs.
I have a container div which contains 3 floated divs. This gives me 3 columns. Where do I put the clearfix bodge?
In the last contained div, at the end of the container or some other obscure place.

Keith

http://www.studiosoft.co.uk

 

[BillyRayPreachersSon]

On the outer container around those 3 DIVs, so:

<div class="clearfix">
   <div id="floatedDiv1">...</div>
   <div id="floatedDiv2">...</div>
   <div id="floatedDiv3">...</div>
</div>

Basically, the rule I use is that it always goes on the most immediate parent element before the floated content.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

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

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

[/tt]

 

[audiopro]

Thanks Dan
I have also been playing around with the overflow element - overflow:auto; and that seems to work also. I am sure thai it will come back to bite me if I use it.

Keith

http://www.studiosoft.co.uk

 

[BillyRayPreachersSon]

I found a very good post a few months back detailing that overflow could be used instead (in fact, I think it was linked to from the top of the PIE clearfix article).

I seem to remember trying it, but found that there were some circumstances in some browsers where it failed miserably... only I can't remember the details any more! Anyway - I switched back to using clearfix, and have only found very very marginal cases where it causes any issues - and they're mostly to do with trying to apply animation to floated elements.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

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

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

[/tt]

 

[audiopro]

Thanks Dan
As always with these fixes, there will be certain circumstances where even the most reliable code breaks.
I will use the clearfix solution and wait for the backlash from the client.


Keith

http://www.studiosoft.co.uk

 

[audiopro]

I notice there are two versions of clearfix, one uses 'after' and the other uses 'both'.
As IE doesn't support the 'after' clause, is the both clause the better option?

Keith

http://www.studiosoft.co.uk

 

[BillyRayPreachersSon]

This is what I use, which works in both IE6 & IE7:

/* 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 seem to remember adding the 'li.clearfix' rule myself some time ago, but haven't found the need to see if it still works or not.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

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

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

[/tt]