3 column centred layout - any column can be the longest. Footer will stay at bottom of window unless content is greater then it stays at bottom of document.
Only tested on PC (IE5, 5.5 , 6, Mozilla 1.2 , Firebird 0.6.1, Opera7, Netscape 6.2). Opera 6 doesn't like the footer but it's usable. Mac IE 5.1.7 & IE5.2.3 and Safari 1.1.1 don't like the footer and render it at bottom of the longest column. However the columns should work fine and the effect is still usable.
This is a simpler version of my 3 column demo and because it is a fixed width we can do away with any real cleverness and just use a background image to display the borders and colours of all three columns
The content comes first in the html for better accessibility and SEO etc. The only drawback is that the header has to be absolutely positioned to allow this to happen. If you are not worried about this then put the header in the flow at the start of the html inside the main outer.
See the explaination on the main 3 col demo for more information on these designs.
2 Column Layouts
Other Layouts
Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here :
Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here :
Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here :
Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here :
Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : end
Right column longest - footer at bottom of document.
Back to the original Full screen 3 column Demo