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

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.