css full height?

Question

I am building a 3 column web page (header & menu bar above a left nav, main area and right sidebar with a full width footer on the bottom). I have background colors for each column but they cut off at the end of the text instead of filling the whole column. Is there a way to fill the whole column that does not rely on using a table (td)?

Here is my CSS for the general layout:

#container
{
    float: left;
    width: 100%; /* IE doubles the margins on floats, this takes care of the problem */
    display: inline; /* this is where Ryan Brill (author of the ALA's article) and I go in "opposite directions" */
    margin-left: -200px;
}
#left
{
    float: left;
    width: 180px; /* IE doubles the margins on floats, this takes care of the problem */
    display: inline;
    margin-left: 200px;
    padding: 0px 0px 0px 5px;
    background: url('/App_Themes/Default/images/RightColumnBackground.png') repeat left top;
}
#main
{
    /* the width from #left (180px) + the negative margin from #container (200px) */
    margin-left: 380px;
    padding: 0px 0px 0px 5px;
}
#sidebar
{
    /* this is to keep the content of #sidebar to the right of #main even if the content of "main is shorter */
    padding-left: 100%; /* this is to "bring back" the #sidebar that has been moved out of the viewport because of the padding value */
    margin-left: -220px;
}

I know I can set a height in the style but that pins the height to a certain number of pixels. Is there a height: fill; type option?

Answer 1

Not in any CSS that'd be currently widely supported across browsers, but there are ways of approximating it.

Answer 2

This is a very common problem. A good approach is to use faux columns.

Answer 3

What you need is the Perfect Liquid Layout in Percentage widths, em widths, or pixel widths.