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).
