23 2006

IE7 Compatible Float Clearing

According to the latest news at least. Includes font-size:0 per the original author of this mess.

.clearfix:after {
    content:".";
    display:block; 
    height:0;
    font-size:0;
    clear:both; 
    visibility:hidden;
}
.clearfix {display:inline-block;}  
/* \\*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* */

2 Comments on “IE7 Compatible Float Clearing”

  1. When I tried adding font-size:0; to the CSS it actually broke the clearing effect in Firefox. So I left it out. I’m not having a problem with an extra line in Firefox. It may help in some cases so test with and without its use.

  2. Clarification. I was using an older version of Firefox where including font-size:0; made the generated content cause a gap. Firefox 1.501 does not have this problem.

Leave a Reply

Elements allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>