css clear fix

[glennk]

Does anyone understand css clearfix ?

All is fine in FF but in IE I get problems. I have a 2 column design and the right column will only stretch to the length of the left column and no further in IE. Obviously this causes problems if the right column has more content than the left because it cuts the content off. Well it doesn't cut it off it seems to force it under the footer.

Someone has suggested using the clearfix solution. I dont fully understand how the code works but I have done as suggested and seem to get no joy. I am wondering if I got the syntax right with this.

This in the css

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

This in the html

<div id="right-column" class="clearfix">

[lavazza]

I don't know... having never tried such a trick

BUT

Unless I'm very much mistaken, there's an error in applying a CLASS to an ID

If so... how about...

#right-column:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

and then

<div id="right-column"> <!-- no CLASS -->

? ? ? ?
-------------------
ETA

Whoops... that would HIDE your right-column div...

hmmmm...

[glennk]

Guess thats a non starter then lol. Thanks for replying though its good to get a reply.

I am fairly new to css and had wondered if it was ok to apply the class like that as it just didnt look right to me but Im sure thats what it was directing me to do.

[glennk]

Ok - sorry, with a bit of help and some reading I managed to fix this problem.

[SuzyUK]

sorry lavazza, but you are mistaken it's perfectly OK to have an id and a class applied to the same element.

glennk, that part of the clearfix method (also known as the "easyclearing method") does only work for the better browsers, IE doesn't support the :after pseudo element, you need to add a hasLayout trick to the end of it to get IE to work the actual full hack is this:

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

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

the last bit is for IE both Mac and windows if support for IE/Mac is not an issue you can change that bottom bit to:

.clearfix {display: inline-block;}

* html .clearfix {height: 1%;}
.clearfix {display: block;}

all that is doing is setting hasLayout to true for IE so you don't really need to treat IE6 (the * HTML bit) differently any more either

you can change it to:

.clearfix {display: inline-block;}
.clearfix {display: block;}

or simply:

.clearfix {zoom: 1;}

All the whole thing is doing is generating a bit of real content to make the containing div think it's got more than floats inside it, therefore it clears the floats. IT should be applied to the div which contains the floats i.e. the one with background that you want to stretch (the one the footer needs to be below) rather than the floated columns themselves.

You can also get a containing div to stretch to contain its floated children using other methods these days, IE<7 still needs hasLayout, but compliant browsers will contain or clear floats if

float

or

overflow

(anything other than visible) is set on the containing div - these two methods are the regarded as the proper way to clear floats.

IMHO the clearfix/easyclearing workaround is overused now, because of the proper ways to clear floats available to us. In some templates I've seen it applied to almost every div showing that people don't understand it.. most drupal themes have it built it in (everywhere!) and in most cases it's not necessary.. in fact I think the only browsers that actually still need it at all (i.e. don't support a natural method of clearing) are NN6/7

another way to clear floats is to add some non floated content after the floats. An empty clearer div just before the closing tag for the wrapper in the HTML, or simply <br style="clear: both;"> while this is an HTML fix a lot still prefer it as it is clear what it is doing.

anyway if you're still having problems getting it to work let us know your HTML structure for the main content section with columns and any containing divs

[lavazza]

sorry lavazza, but you are mistaken

Hi Suzy,

As you know, it ain't the first time... and I know it won't be the last...

It's clear and helpful answers from you (and others) that keep me subscribed to this forum :)