Msg#: 3658008 posted 7:31 am on May 24, 2008 (gmt 0)
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.
Msg#: 3658008 posted 10:47 am on May 24, 2008 (gmt 0)
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:
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