3Col_NN4_RWS_C header

Another NN4-compatible 3-column CSS layout.

Provides:

  • liquid header
  • liquid center column
  • liquid or fixed-width side columns
  • footers
  • extra blocks of columns

right A

This column's width is fixed

center A

This layout is for cases when you would like any of the left, center or right columns to potentially be the tallest.

Everything is wrapped within two divs (here called #wrapper1 and #wrapper2) that have background images that are positioned and repeated such that they provide the styling of the left and right columns (and if you were to create a wide enough background image, for the center column too).

Works fully in:

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

This technique will fail in OmniWeb since it does not support the positioning of background images. Although right columns cannot be created with this technique, left ones can. Furthermore, the CodeBitch OmniWeb hack or my inline OmniWeb hack can be utilised to provide alternative styling for it.

NN4 maintains the basic layout and needs additional styling. The columns cannot be coloured differently to each other or have dividing lines. Reliably, that is - but feel free to prove me wrong. It introduces a substantial amount of space at the end of each div. This is related in some obscure way to the wrapper tags. If this is a problem, there is another riff on the same theme, which places the background images in the html and body selectors rather than in the wrapper divs.

If you require a layout that NN4 renders as identically to modern browsers as possible and do not require that all columns may be the tallest, use another layout such as 3Col_NN4_RWS_B or 3Col_NN4_AR.

Change Log

Middle text 1 goes here

left B

Text to show what happens if this column is the longest

Text to show what happens if this column is the longest

Text to show what happens if this column is the longest

right B

Not very much text here either

center B

Not very much text here either

Middle text 2 goes here

left C

Not very much text here either

right C

Text to show what happens if this column is the longest

Text to show what happens if this column is the longest

Text to show what happens if this column is the longest

center C

Not very much text here either