CSS Page Layout Templates
3 Column Templates
The following templates are all three column templates.
The 'box hack' has been removed from the templates in the last round of changes which means the 'pixel-perfect' templates are not 'pixel-perfect' in IE5xPC. Future versions may include the box-hack again.
Templates: Two column |
Three column |
General
Three Column, Left & Right Columns Static
Browsers:
'
'
'
'
(5+)
'
'
'
'
(5+)
Description:
This is much the same as 'Two Col Left Col
Static' but now with the addition of a right hand column which is absolutely
positioned.
Actions:
View | Image
Preview | Download [ 6k]
[ZIP]
Three Column 'Pixel-Perfect'
Browsers:
'
'
'
'
(6)
'
'
'
'
(6)
Description:
Sometimes this is called the "Holy Grail".
It's a three column template which fits together "pixel perfect".
Actions:
View | Image Preview | units like this, evenindirectly, can be risky. A better choice might be this:
IMG{float: left; margin-left: -10%;}This will allow the images' left margins to scale along withthe environment.
href="temps/zips/3c-lcrc-static-pp.zip" title="Download template">Download [ 6k] [ZIP]Three Column 'Pixel-Perfect' with Header
Browsers:
'
'
'
'
(6)
'
'
'
'
(6)
Description:
The same as the "Holy Grail" above but with
a header div. Also expands to fit the whole screen.
Actions:
View | Image Preview | Download [ 3k]
[ZIP]
Three
Column Pixel-Perfect with Header & Footer 
Browsers:
'
'
'
'
(5+)
'
'
'
'
(5+)
Description:
My most complete template. It has three columns, a header and footer
and will resize with the browser window.
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. :-)