Posted By

damarev on 01/10/07

Tagged

Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

basicmagic
stoker
jonhenshaw

autoclear floated elements v2 (works also on IE7)

/ Published in: CSS

works in IE6, IE7 and Firefox

Expand | Embed | Plain Text

.autoclear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.autoclear {display:inline-block;}
.autoclear {display:block;}
* html .autoclear {height: 1%;}

Report this snippet Tweet

Comments

Subscribe to comments

Posted By: basicmagic on January 10, 2007

is it possible, please- to see a snippet of code as to how these css classes would be used in html, after the floated elements?

Posted By: damarev on January 15, 2007

Given this example:

CONTENT LEFT CONTENT RIGHT

You can turn it into this, with no extra markup to clear floated elements:

CONTENT LEFT CONTENT RIGHT

Posted By: damarev on January 15, 2007

Sorry:

<div id="container" class="autoclear"> <div style="float:left;">CONTENT LEFT</div> <div style="float:right;">CONTENT RIGHT</div> </div>

Comment:

You need to login to post a comment.