2 Column Layout using Floats

[Joel Byrd]

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>
-------------]

[David E. Ross]

Joel Byrd wrote:

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>
-------------]

For the <p> at the start of the footer line, add an in-line style or a
reference to a style-sheet that has "clear:both ".

--

David E. Ross
<http://www.rossde.com/>

Concerned about someone (e.g., Pres. Bush) snooping
into your E-mail? Use PGP.
See my <http://www.rossde.com/PGP/>

[Joel Byrd]

Yes, thank you - I found out that this is the basic idea behind the
solution. Well, actually, it is adding a div with "clear: both" at the
end of the div that is wrapping the 2 floated columns. But an even
better way to do this does not require adding anything to the html and
is the .clearfix class as documented here:
http://www.positioniseverything.net/easyclearing.html - I think this is
a very good solution.

[Jim Moe]

Joel Byrd wrote:

[...] But an even
better way to do this does not require adding anything to the html and
is the .clearfix class as documented here:
http://www.positioniseverything.net/easyclearing.html - I think this is
a very good solution.

David did mention to add or modify the class for the <p> that contained
"clear:both ". No need for inline styles or an extra <div>.
The ".clearfix" is meant to create a uniformity of presentation between
IE and the world for the way floated elements wrap content. It has no
advantage for your case except the "clear:both " rule. So all the other
rules in .clearfix are dead weight.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)