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

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

Report this snippet  

Comments

RSS Icon 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>

You need to login to post a comment.