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:
  width: 100%;
  overflow: hidden;

For a more detailed description of the above method look at "";, 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: *** */ .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
T: 02 9568 6866
F: 02 9568 6733
W: |

.....>> Open Source  - Own it  - ...../>

The discussion list for

for some hints on posting to the list & getting help

Reply via email to