CSS Page Layout 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 well tested before using on a 'production' web site.
The templates are valid CSS2 and XHTML1.0 Transitional and have been tested on WinXP with IE6, Mozilla 1.5b, Netscape 7.1 and Opera 7.11.
Two Column Flexible
Browsers:
Description:
Probably the easiest page to make. Contains two
layout divs, the main content div is just floated to the left.
Very simple!
Actions:
View | Image
Preview | Download [4K]
[ZIP]
Two Column Flexible With Header
Browsers:
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.
Actions:
View | Image
Preview | Download [4K]
[ZIP]
Two Column, Left Column Static
Browsers:
Description:
Another simple template. Two columns, the left
column is absolutly positioned and is a fixed width. The right
content column is sized and positioned by using margins and will
resize with the browser window.
Actions:
View | Image
Preview | Download [4K]
[ZIP]
Two Column, Left Column Static, with Header Bar
Browsers:
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..
Actions:
View | Image
Preview | Download [4K]
[ZIP]
Two
Column Fixed Width with Header & Footer
Browsers:
Description:
A fixed width centered page with a header,
footer, left navigation column and right content column. One of
my favourites.
Actions:
View | Image
Preview | Download [4K]
[ZIP]
Three Column, Left & Right Columns Static
Browsers:
Description:
This is much the same as 'Two Col Left Col
Static' but now with a right hand column which is absolutly
positioned.
Actions:
View | Image
Preview | Download [4K]
[ZIP]
Three Column 'Pixel-Perfect'
Browsers:
Description:
Sometimes this is called the "Holy Grail".
Basically the same as the one above but we attempt to make it fit
together "pixel perfect".
Actions:
View | Image Preview | Download [4K]
[ZIP]
Three Column 'Pixel-Perfect' with Header
Browsers:
Description:
Basically same as the "Holy Grail" above but with
a header box. Also expanded to fit the whole screen, A modified
version of this is used for this site.
Actions:
View | Image Preview | Download [4K]
[ZIP]
Three
Column Pixel-Perfect with Header & Footer
Browsers:
Description:
My most complete template. Like the above but
with a footer and hopefully a lot more flexible and
cross-browser. Some limitations but probably the best
template.
Actions:
View | Image Preview | Download [5K]
[ZIP]
Three Column Nested
Browsers:
Description:
This is just a variation of the templates above.
Three columns (L & R navigation) are nested in an outer div.
The navigation columns are floated to the sides.
Actions:
View | Image
Preview | Download [4K]
[ZIP]
Center Float Box
Browsers:
Description:
Pretty simple template but I like this one. It
has top and bottom "bar" for links etc with a center content box
of fixed or percentage width which floats in the browser. The
content box has a scroll bar.
Actions:
View | Image
Preview | Download [4K]
[ZIP]
Nested Box
Browsers:
Description:
This is a very simple template. It's just a box
nested in a main div and floated to one side. Simple and
effective.
Actions:
View | Image
Preview | Download [4K]
[ZIP]
Note: The poor colour schemes and thick borders of the templates are for demonstration purposes. :-)
