How can I use CSS to create a middle column that fills the height of the page?

Question

I'd like to create a 3 column layout, with the middle being for all the content and menus and the other two being a solid background color.

I have something like this set up already, but the middle column doesn't extend to the bottom of the page. How can I get this middle column to extend to the bottom of the page?

Answer 1

Since most pure-CSS answers to this question are not supported by browsers, your best best is often to use a background image for this. Create the image with the right sized columns and apply it to whatever contains all three columns on the page. Make sure that the image can be horizontally repeated, and it will do so all the way down to the bottom of the page, even if the middle column is not actually the right size.

Answer 2

This site is really helpful for this sort of thing:

http://css.maxdesign.com.au/floatutorial/tutorial0916.htm

But I think the basic idea is you create a float:left div and then a float:right div and then another div for the middle.

Answer 3

without code we can't really tell what's wrong. Here are some helpful links:

http://www.alistapart.com/articles/multicolumnlayouts/

http://www.alistapart.com/articles/fauxcolumns/