Look for a three column CSS template that has these features
-
Heading title above three columns
-
All columns must be at least the same height as the viewport. So if the column has a different bgcolor, the color is to the bottom of the viewport, even if the column has no content.
-
The second and third columns are of variable width. If the width of the 3rd column is 0, the 3rd column collapses and the pattern turns into the 2nd column. (not this important requirement)
-
A sticky footer in the 2nd column that always stays at the bottom of the viewport, even if the 2nd column has no content, however, the footer should not be below the bottom of the 1st and 3rd columns.
-
Works in FF and IE 6+
Example: (the two dotted lines are the edges of the viewport)
-----------------------------------------
HEADER full width of viewport
column 1 column 2 column 3
| |
| |
| |
\ / my footer \ /
-----------------------------------------
source to share
Indeed, css alone is not suitable for this kind of thing.
use a simple three column table and 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 reach 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.
source to share
I would start with List Apart holy grail , then mix the sticky footer. The way you describe the footer is perhaps not possible with straight CSS.
source to share
Yahoo's UI can do a lot of what you're talking about. But I agree with John Sheehan that I don't think you can do this with straightforward CSS. This will require some material like dhtml or jquery.
source to share