Stylesheets - 2 Column Layout using Floats

Author

2 Column Layout using Floats

Joel Byrd

2006-04-25, 7:03 pm

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

2006-04-25, 7:03 pm

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

2006-04-25, 7:03 pm

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

2006-04-26, 3:50 am

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)