center

This layout is derived from a 3-box example w/o scripts by Al Sparber.

It is extremely simple and straightforward and requires no javascript. There are a couple of CSS hacks to vary the vertical spacing between header and columns and between columns and footer although these can be removed if you do not mind NN4 being "looser".

Its real strength is that the columns can be included in any order which has important implications for accessibility.

Positioning is not very precise, but if that is not the main concern of this layout.

Any footer required needs to placed at the end of the central column. If the central column is not long enough, the footer will be obscured by the left and/or right columns. Nor can the footer stretch accross the whole width of the page but just to the right margin of the central column (though Gecko-derived browsers and Opera allow this through the setting of a negative margin-right on the footer div as shown in this example).

Works in:

• IE 5 - 6 (PC)
• IE5 (Mac)
• Opera 5 - 7
• Gecko-derived browsers
• NN4

OmniWeb does not work properly with this layout since it incorrectly places absolutely positioned relative to the top of the page. This is why I describe this layout as semi-liquid. If you do not care about OmniWeb, you may place whatever you like in the header and the layout will expand to fit. If you must cater for OmniWeb, you must fix the height of the header and the top value of the columns.

footer

This footer shows that it is possible to span the whole width of the page in some browsers - but not in others.

left

• 3Col_NN4_RWS_A
• 3Col_NN4_RWS_B
• 3Col_NN4_RWS_C
• 3Col_NN4_RWS_D
• 3Col_NN4_AR
• 3Col_NN4_P7

Back to CSS index

right

Any old text

Any old text

Any old text

Any old text