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
Description:
Probably the easiest page to make. Contains two
layout divs, the main content div is just floated to the left.
Very simple!
Two
Column Flexible With Header
Description:
Basically the same template as above but with the
addition of a header div for page title, your logo or banners
etc. Again very simple to set up.
Two
Column, Left Column Static
Description:
Two columns, the left
column is absolutely positioned on the left and is a fixed width. The right
content column is sized and positioned by using margins and will
resize with the browser window.
H2 {margin: auto auto auto 3em;}
Again, we got the effect we wanted. The problem is all that typing ofauto gets a little tedious. After all, all we wantto do is affect the margin on one side of the element as shown inFigure 7-14, which leads us to the next topic.
Figure 7-14. Setting a new value for just the left margin
7.3.4. Single-Side Margin Properties
Two
Column, Left Column Static, with Header Bar
Description:
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 
Description:
A fixed width centered page with a header,
footer, left navigation column and right content column. One of
my favourites.
Templates: Two column |
Three column |
General
Note: The poor colour schemes and thick borders
of the templates are for demonstration purposes. :-)