If you are doing a lot of CSS-based layouts, it is likely that you have done the following:

   
some text

This never really sit well with me.  Recently, I decided to try and find a better way to accomplish this with a CSS class.  In so doing I came across this post.  If you want to know a bunch of stuff about why this trick works I suggest you read the post.  I will summarize by saying that this trick uses the :after CSS pseudo-selector which is not currently recognized by IE.  But, conveniently we can make ie execute the behavior by assigning a ‘zoom’ to it.  A css attribute that is ignored by other browsers but makes IE render it differently.  Hear is the css code.

.clearme { zoom: 1; }
.clearme:after { content: "."; display: block; height: 0; clear: both; visibility: hidden } 

Then, you assign an element to be cleared by adding the ‘clearme’ class.

  
some text

And everything following will clear the floating div.  I have verified this works in IE 6, IE 7, IE 8, Chrome, Firefox, and Safari (mac).

Tags: ,