#css float

[suchitraphadke3]

Two Column CSS Layout - Part 1

[chrismakesdesigns-blog]

Self-Clearing CSS Floats

Read about this in the Rockable Press "Building Wordpress Themes from Scratch" book, he quotes Dan Cederholm on this and I think it's a great idea:

So for developing WP themes we need to have some pretty generic class naming, so we want the following:

.left{

float:left;

}

.right{

float:right;

}

To ensure that these classes don't do anything they aren't supposed to, like extend past where they should let's clear them, but let's take a different approach.

.group:after{

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}

So if we used these in our code it would look something like this:

<div id="mainContainer" class="group">

     <div class="left">Left-floated Class</div>

     <div class="right">RIght-floated Class</div>

</div>

Instead of using the empty div clearing, or even clear-fix this mainContainer div will clear after itself.  But what about older browsers that don't like the whole pseudo-class selector?  Of course we have a fix!

* html .group{ /* This fixes is up IE6 if you still support it */

height:1%;

}

*:first-child+html .group{ /* This is the IE7 fix */

min-height:1px;

}

Self-Clearing floats! I can't tell you how happy I was to find this little trick since I am what you might call a "div floater".  To learn more about self-clearing floats, head on over to http://handcraftedcss.com