CSS Page Layout Templates
The following page templates are all constructed
using XHTML1.0 and CSS2.
Templates marked with are ones I
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.
Probably the easiest page to make. Contains two
layout divs, the main content div is just floated to the left.
Column Flexible With Header
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.
Column, Left Column Static
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.
Column, Left Column Static, with Header Bar
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..
Column Fixed Width with Header & Footer
A fixed width centered page with a header,
footer, left navigation column and right content column. One of
Column, Left & Right Columns Static
This is much the same as 'Two Col Left Col
Static' but now with a right hand column which is absolutly
Sometimes this is called the "Holy Grail".
Basically the same as the one above but we attempt to make it fit
together "pixel perfect".
Column 'Pixel-Perfect' with Header
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.
Column Pixel-Perfect with Header & Footer
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
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.
Center Float Box
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.
This is a very simple template. It's just a box
nested in a main div and floated to one side. Simple and
Note: The poor colour schemes and thick borders
of the templates are for demonstration purposes. :-)