There's a simpler way of "clearing" floats without using the "clear"
attribute.
If you apply "overflow: hidden;" to the container DIV it will then
expand to contain all the floats (as long as a height hasn't been
specified, then it will possibly clip the floats).
The only issue with this is that IE needs a width (a few other
attributes work as well) to make its "special" float rendering engine
kick in, so I generally give the DIV a width of 100%; which DIVs do by
default so there are unusually no adverse effects.
Here's the code:
-----------------
.expand
{
width: 100%;
overflow: hidden;
}
-----------------
For a more detailed description of the above method look at
"http://www.quirksmode.org/css/clearing.html";, which includes the names
of who first found this method.
Paul Noone wrote:
If you have any problems the clear div being applied after the column divs
(as I did) you can try applying the following to the "contentwrap" div, and
any other container that holds floats.
/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
--
Mark White
Implementation Specialist
Squiz.net
T: 02 9568 6866
F: 02 9568 6733
E: [EMAIL PROTECTED]
W: www.squiz.net | http://matrix.squiz.net
.....>> Open Source - Own it - Squiz.net ...../>
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
