/****************************************************************************/
/* THREE COLUMN BODY WITH HEADER AND FOOTER */
/****************************************************************************
This style sheet defines a three column layout with a header and a footer
that will position at the bottom of the viewport (screen or page) or after
all content if the page is longer than the viewport.
+--------------------------------------------------------+
| div#header |
+-------------+---------------------------+--------------+
| div#leftbar | div#content | div#rightbar |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
+-------------+---------------------------+--------------+
| div#footer |
+--------------------------------------------------------+
Features:
1. div#leftbar and div#rightbar may be dynamically omitted without any
adverse layout problems.
Restrictions:
1. Requires a CSS2 compliant browser (Netscape 6.2, Mozilla 1.2, Firebird)
2. div#header and div#footer must have fixed heights
3. div#leftbar and div#rightbar must have fixed widths
4. If div#header or div#footer are ommitted, the content will still
be laid out as if they were present.
Internet Explorer Restrictions:
1. Requeires Internet Explorer 5.0 or later
2. The must switch Internet Explorer into "Quirks mode"
3. Internet Explorer needs an HTML table construct to host the
columns as it does not support CSS tables.
Recommendations:
1. Do not add site-specific formating styles to this sheet.
Either use "@import url(framework.css);" in a master style sheet or
explicitly link this sheet from the HTML.
References:
1. Original CSS and HTML constructs
http://www.tanfa.co.uk/css/layouts/css-3-column-layout-v2.asp
2. Conditional Comments in Internet Explorer
http://www.javascriptkit.com/howto/cc.shtml
HTML Template:
title stuff
div#header
div#leftbar
div#content
div#rightbar
/****************************************************************************/
/* WARNING: Do not alter anything between this point and the next warning. */
/* Any changes will likely break the column structure in at least */
/* one browser. */
/****************************************************************************/
/*--------------------------------------------------------------------------*/
/* Size the base containers (HTML and BODY) to the viewport */
html, body, .masterform
{
width: 100%; height: 100%;
margin: 0; border: 0; padding: 0;
}
/*--------------------------------------------------------------------------*/
/* Force the header to the top and bring it to the top of the Z-order */
div#header
{
position: absolute; left: 0; top: 0;
z-index: 10;
}
/*--------------------------------------------------------------------------*/
/* Define a master container for the leftbar, content, and rightbar columns */
div#bodyframe
{
display: table;
position: relative; clear: both;
height: 100%; min-height: 100%;
margin: 0; border: 0; padding: 0;
border-spacing: 0;
}
table#iebodyframe
{
margin: 0; border: 0; padding: 0;
border-collapse: collapse;
width: 100%; height: 100%;
}
div#body
{
display: table-row;
}
/*--------------------------------------------------------------------------*/
/* Define columns in the master container */
div#leftbar, div#content, div#rightbar
{
position: relative;
display: table-cell; vertical-align: top;
height: 100%; min-height: 100%;
margin: 0; border: 0; padding: 0;
}
td#ieleftbar, td#iecontent, td#ierightbar
{
vertical-align: top;
margin: 0; border: 0; padding: 0;
}
/*--------------------------------------------------------------------------*/
/* Bring the leftbar and rightbar columns forward in the Z-Order. */
div#leftbar, div#rightbar
{
z-index: 5;
}
/*--------------------------------------------------------------------------*/
/* Allow the content column with adjust it's width automatically */
div#content, td#iecontent
{
width: auto;
}
/*--------------------------------------------------------------------------*/
/* Force the footer after content and bring it to the top of the Z-Order. */
div#footer
{
position: relative; clear: both;
z-index: 10;
}
/****************************************************************************/
/* WARNING: Do not alter anything before this point. Any changes will */
/* likely break the column structure in at least one browser. */
/****************************************************************************/