right A
This column's width is fixed
center A
NOTICE: The backgrounds do not work properly in IE5.5 PC although the grid structure is maintained. This is the now the biggest reason for preferring 3Col_NN4_RWS_C. After all, a small improvement in NN4 is hardly a good trade for feeble performance in IE5.5. That said, I leave this layout here in case anyone else has a brainwave as how to rectify this problem.
This layout is for cases when you would like any of the left, center or right columns to potentially be the tallest and the left and right columns can be placed right up against the respective edges of the browser viewport.
The html and body selectors 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 html selector, for the center column too).
The layout is similar to 3Col_NN4_RWS_C, but provides improved support for NN4 in that it introduces far less ghost space in each div. It does though, introduce some ghost space.
However, it requires the margins and colour/background of the body to be created through the background images and the insertion of empty divs before and after the rest of the html - rather than just changing the body's margin and background CSS values. Of course, if margins are not needed, this observation is irrelevant.
Works fully in:
- IE6 (PC)
- IE5 (Mac)
- Opera 5 - 7
- Gecko-derived browsers
Netscape 4 (NN4) maintains the basic layout but 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.
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.
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. NB. the CodeBitch method is used on this page.
This layout is based on 3Col_NN4_RWS_A.