advanced search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

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


Plain TextExpand 
  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: 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>

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: 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?

You need to login to post a comment.