.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 thoughts on “IE7 Compatible Float Clearing”

1. Patrick says:

   2006 Mar 23 at 5:40 pm

   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. Patrick says:

   2006 Mar 27 at 6:28 pm

   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.

This site uses Akismet to reduce spam. Learn how your comment data is processed.