Forcing div height with CSS

Question

I have a test three-column page up ( http://hussain.mooo.com ). However, the left and right columns refuse to stretch to the bottom of the page. The XHTML and CSS is valid, I'm using Firefox, and they're all inside a wrapper div. Any help?

Thanks in advance.

Answer 1

The easiest, most famous and most used way to do so is by using Faux Columns.

You can read about this useful technique here: http://www.alistapart.com/articles/fauxcolumns/

In a comment and in another answer to this same question @Tharkun pointed out that this solution only works with fixed width columns. This is true for the original version of Faux Columns, but it's easy to extended this technique to work with liquid layouts (liquid layout = at least a column width specified in %) and here is explained how to do so: http://www.communitymx.com/content/article.cfm?cid=afc58

Answer 2

Take a look at the page layouts at maxdesign.

Answer 3

As @Andrea Zilio says you could use the faux column technique but this would mean to give up the fluid width of at least one or two columns.

There are other approaches for 100% height in multi-column layouts with fluid width.

Mathew James Taylor has a great explanation of how multi-column fluid 100% height layouts works and a couple of layouts you can copy (by looking at the source code).