I know this is one of those Web 1.0 newbie questions, but alas, I am in a position to be asking it myself. I do sites that do not necessitate this sort of layout and am now looking at doing one for a friend with a three-column layout, fixed-width center column...with the twist of no header or footer box elements and the stip that all three columns stretch height-wise to fit the size of any screen on which they are viewed.
Further exacerbating this issue is that the body will have one color or background image and the center column will have its own background color or image.
Visually, the page layout would be as such:
+----------+---------------+----------+
|nothing |only content |nothing |
|here |will be here |here |
|just the |w/a different |just the |
|body b/g |background |body b/g |
|color or |color or |color or |
|image |image |image |
| | | |
| |all 3 columns | |
| |always fill | |
| |screen height | |
+----------+---------------+----------+
I have read some interesting arguments against absolute positioning (Adobe forums) which obviously clash with faux columns and other absolute/relative positioning. Ideally I'd like to do it all with floats but am just not sure as to the most efficient way to accomplish this. To date I have not tried anything because this only just fell into my lap. Again, I know this is basic, but when I come from doing sites with one B/G color and centered elements it has me thinking, 'Why is this so hard?'
Not sure if you intend for the middle section to be wider than the side columns - if you do you will want it to be wider than 33.3%.
For height, you want:
html, body {
height: 100%;
}
Then ensure your central div is
position: relative;
height: 100%;
margin: 0 auto;
See fiddle here http://jsfiddle.net/mWqwD/