Variable Content Div Height Using Css With Fixed Header And Footer

I'm having a bit of trouble with some CSS, and am seeking some help from this wonderful community. I am trying to build a layout containing the following elements: 1) A header area

Solution 1:

Does this fiddle meet your requirements? I couldn't quite tell whether you wanted the footer to always be at the bottom of the page or not.

---

Update

This fiddle has the footer always at the bottom.

Solution 2:

A common question. If you can't find a suitable layout here it doesn't exist.

Solution 3:

The article In Search of the Holy Grail on A List Apart comes up with a three-column layout that fits your description. I'd suggest you take a look at the article and omit the #right column altogether.

Solution 4:

Use a table or display: table-cell for content which has to have the same height.

[EDIT] A three column layout with a table is done in a couple of minutes and it works.

All those hacks using floating divs just create brittle layouts which sometimes work and sometimes fail. They are hard to debug, hard to get right and need a lot of CSS styles and HTML code. For little return. So if you want to waste a couple of days to get it to work, by all means use floating divs.

It's not my fault that someone said "tables are bad." It's like saying "the sun is bad because it burns you." Well, use it appropriately.