Looking for a 3 column css template which has these features..

Question

1- Header div on top of the 3 columns

2- Height of all columns must fill at least the height of viewport. so if a column has a different bgcolor, the color is all the way to bottom of viewport even if column has no content.

3- second and 3rd columns have variable width. if 3rd column width is 0, 3rd column collapses and template turns into a 2 column one. (not that important requirement)

4- A sticky footer in 2nd column which always stays at bottom of viewport even if 2nd column has no content however footer should not be below bottom border of 1st and 3rd columns.

5- Works in FF & IE 6+

Example: (the two dashed lines are viewport edges)

-----------------------------------------
       HEADER full width of viewport

column 1      column 2       column 3
  |                             |
  |                             |
  |                             |
 \ /           my footer       \ /
-----------------------------------------

Answer 1

Here's a good reference

http://www.glish.com/css/index.html

Answer 2

I would start with A List Apart's holy grail then mix in the sticky footer. The way you describe the footer though is probably not possible using straight CSS.

Answer 3

The Yahoo UI can do much of what you are talking about. But I agree with John Sheehan that I don't think you can do it with straight CSS. Some dhtml or jquery type stuff will be required.

Answer 4

check http://www.blueprintcss.org/

Answer 5

Give up and use tables

Really, css alone is not suitable for this kind of thing.

use a simple 3-column table, then use css on top of it.

<table id="layout"><tr>
    <td id="left-column"> {{ NAV MENU }} </td>
    <td>
        <table id="middle-table"><tr><td id="middle-column"> {{ CONTENT GOES HERE }} </td></tr>
               <tr><td id="middle-footer">{{FOOTER}}</td></tr>
        </table>       
    </td>
    <td id="right-column">{{RIGHT COLUMN}}</td>
</tr></table>

<style type="text/css">
table#layout tr td
{
    vertical-align:top
}
table#layout
{
    width: 100%;
    height: 100%;
}
td#left-column
{
    width: 100px; /* or what ever you want */
}

table#middle-table, td#middle-column
{
    height: 100%;
}
</style>

To achieve the footer in the middle column, I inserted another table inside the middle column. I don't think you can achieve this effect without a table.