Webmaster Forum / HTML, CSS, Scripts / CSS / April 2006

I've got a 2-column tableless layout and I'm using floats to render the

columns.  Here are the basic style definitions for the 2 columns:

       #left_col {
               width: 59%;
               float: left;
               clear: left;
       }

       #right_col {
               width: 39%;
               float: right;
               clear: right;
               }

This works fine and allows dynamic column widths.  Note that the
heights of the columns are independant of each other.  The problem I'm
having is getting a footer to show up at the bottom of these columns.
It actually works fine in IE, but not in other browsers (I've tried
Firefox and Opera).  What happens is that the footer shows up at the
bottom of whichever column is last in the HTML code.  And I've got the
2 columns wrapped inside a div, but I still get the same result.

The basic html is:

[-----------

<div id="wrapper">

 <div id="left_col">
   some content.
 </div>

 <div id="right_col">
   some content.
 </div>

</div>

<p>This is the footer.</p>

-------------]