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:
'
'
'
'
(5+)
line-height: 1px for the
"S", the actual inline box is so small that it has almost
no effect on the height of the line box. While the title shown in
Figure 11-16 may not precisely match the title in
Figure 11-14, they're very close to each other.
'
'
'
'
(5+)
line-height: 1px for the
"S", the actual inline box is so small that it has almost
no effect on the height of the line box. While the title shown in
Figure 11-16 may not precisely match the title in
Figure 11-14, they're very close to each other.
So, put together, here's the entire style sheet:
BODY {color: black; background: white;}
P {font-family: Times,serif; text-align: justify; text-indent: 6em;}
IMG{float: left; margin: 0.5em 0.5em 0.5em -10%;}
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 [ 5k]
[ZIP]
Two Column Flexible With Header
Browsers:
'
'
'
'
(5+)
'
'
'
'
(5+)
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 [ 3k]
[ZIP]
Two Column, Left Column Static
Browsers:
'
'
'
'
(5+)
'
'
'
'
(5+)
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.
Actions:
View | Image
Preview | Download [ 6k]
[ZIP]
Two Column, Left Column Static, with Header Bar
Browsers:
'
'
'
'
(5+)
'
'
'
'
(5+)
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 [ 6k]
[ZIP]
Two
Column Fixed Width with Header & Footer
Browsers:
'
'
'
'
(5+)
'
'
'
'
(5+)
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 [ 6k]
[ZIP]
Templates: Two column |
Three column |
General
Note: The poor colour schemes and thick borders of the templates are for demonstration purposes. :-)