Equal height columns w/ footer using CSS?

Answer 1

The only solution to this that i foind was using some JS to calculate the heights of the sidebar, and content areas and then making them both equal. calling the JS function onload. If you can find a better solution let me know.

Answer 2

This might be what you're looking for. I worked with a similar layout to yours and I used this solution, with a few modifications, to get it to obey not just the content height, but also the sidebar height.

Answer 3

One technique is to use a very large value for the columns' padding-bottom and a similarly large negative value for margin-bottom. Something like the following:

#container {
    overflow: hidden;
}

#container .column {
    padding-bottom: 20010px;  /* X + padding-bottom */
    margin-bottom: -20000px;  /* X */
}

#footer {
    position: relative;
}

The best description of the method I've seen is the in the "One True Layout" article on Position is Everything. (Don't forget to check out the potential problems article as well.)

Answer 4

If you have both Sidebar and MainContent floated then putting clear: both; in the rules for the footer should mean it always gets pushed down - see this two column layout tutorial on 456 Berea Street for more details. If your Sidebar is absolutely positioned then you could be having a bit more fun, here's a good resource for other layouts.

Answer 5

There is also another option - it is cross browser and without any hacks - check equal height columns