CSS Page Layout Templates

Introduction/2 Column Templates

The following page templates are all constructed using XHTML1.0 and CSS2.
Templates marked with are ones I recommend.

Please note: these templates are a learning tool and should be thoroughly tested before being used on a 'production' web site.

The templates are valid CSS2 and XHTML1.0 Transitional and have been tested on WinXP with IE6, Opera 7.11 and Mozilla 1.5b as well as Firefox 0.8 & Netscape 7.1 (which are basically the same as Mozilla).

Templates: Two column |  Three column |  General

Two Column Flexible

Browsers: ' ' ' ' ⁽⁵⁺⁾

Two Column Flexible With Header

Browsers: ' ' ' ' ⁽⁵⁺⁾

Two Column, Left Column Static

Browsers: ' ' ' ' ⁽⁵⁺⁾

Two Column, Left Column Static, with Header Bar

Browsers: ' ' ' ' ⁽⁵⁺⁾

Description: Given the declared width of 200 pixels, the padding will be 20 pixels onall sides.</P></DIV><DIV STYLE="width: 100px;"><P>This paragraph is contained within a DIV with a width of 100 pixels,so its padding will still be 10% of the width of the paragraph's parent.There will, therefore, be half as much padding on this paragraph as thaton the first paragraph.</P>

Figure 7-59. Padding, percentages, and the widths of parent

We've seen this before, of course -- in Section 7.3, "Margins", in case you don't remember -- but This is the same template as above but with the addition of a simple header bar which can be used for links, search box etc..

Two Column Fixed Width with Header & Footer

Browsers: ' ' ' ' ⁽⁵⁺⁾

Templates: Two column |  Three column |  General

Note: The poor colour schemes and thick borders of the templates are for demonstration purposes. :-)