Posted By

blueocto on 02/17/11


Tagged

clearfix


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

maltem
Adrian
aaearhart
robotici


The New Clearfix Method


 / Published in: CSS
 

URL: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

Preferably put the IE6 and IE7 code in designated stylesheets.

  1. /* new clearfix */
  2. .clearfix:after {
  3. visibility: hidden;
  4. display: block;
  5. font-size: 0;
  6. content: " ";
  7. clear: both;
  8. height: 0;
  9. }
  10. * html .clearfix { zoom: 1; } /* IE6 */
  11. *:first-child+html .clearfix { zoom: 1; } /* IE7 */

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: kristapsancans on February 17, 2011

You can always clear float's by adding overflow:hidden and width to container. Works in all browsers.

Posted By: blueocto on December 21, 2011

I now use this method:

Contain floats: nicolasgallagher.com/micro-clearfix-hack/

You need to login to post a comment.