advanced code snippet search

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.

Expand | Embed | Plain Text 
  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.