Re: CSS layout: how to make column eextend downward

"darius" <noone (AT) here (DOT) invalid> wrote

I have 2 columns


#main_content
{
float: left;
width: 75%;
margin: 0;
background: #f8eaea;
padding: 1em 0% 3em 2%;
}


#side_content
{
float: left;
width: 20%;
padding: 3em 1% 3em 1%;
background: #fff;
}


The problem here is when one of the columns is shorter than the other,
it's pretty obvious due to the different background color that the
shorter column does not extend down all the way, which makes it look odd.
How should this be done? thanks in advance.

You have a few options, faux background as described by Mark, use display:
table which is the ideal solution but doesn't work in IE (infuriating isn't
it), or use tables (yeah, I know!).

I discuss these options here:
http://nrkn.com/3ColRoundAlpha/

It's a three column layout but the principle is the same. Except because
you're not using transparency (presumably) you also have the faux background
option as offered by Mark.