Basic NN4-compatible 3-column CSS layout.
Provides:
Due to the way NN4 calculates the width of the browser window, if you resize the browser, the width of this column will fluctuate rather unpredictably. If you don't mind the odd fleeting overlap, add a few percentage pointsor or pixels. To be certain of no overlap, you're probably safe sticking at the theoretically correct size.
If the right column is not coloured in any way, this effect should be less noticeable.
This layout is derived from an original layout by Mark Waterhouse. It makes some enhancements and makes the structure more obvious (in particular the subtle (or not so subtle) differences between most other browsers and Netscape 4 [NN4]. It also no doubt introduces some quirks that were not present in the original. To echo his words, this is simply my humble attempt to create something that fits my needs. For other NN4-compatible CSS layouts, see Craig Saila's major roundup.
My design constraints, like Mark's, are fairly straightforward. I want a header and a footer, in addition to the three columns. I want something that will work in NN4 (not always, but sometimes - the desire that is, not the reliability). I also want to be able to set colours in all of the columns and position them reasonably precisely. You don't have to use colours if you don't want to. This layout merely shows that you can. The other layouts listed in the left column merely refine the basic idea. They are not polished designs - they demonstrate the grid effects possible by adapting this basic layout.
The styling of the elements has been kept to a minimum so as not to detract from the structure of the layout and to demonstrate the liquidity and precise positioning of elements.
The main improvement of this page is that no elements are absolutely positioned. This means that the header can be truly vertically liquid and browsers such as OmniWeb, which insists on placing absolutely positioned elements at the top of the browser window if no value for top is specified, can be catered for. It also means that footers can be used. More than that, it means that multiple blocks of columns can be placed one after the other if required.
The layout also works in IE5 (Mac) which the original does not do.
The center column is liquid. The left and right columns may be fixed or liquid. In theory, columns could be nested within columns although IE5 (Mac)'s bug regarding the positioning of nested elements probably means that should probably remain a theory.
The layout requires no javascript (except for that needed to overcome the NN4 onresize bug, but that doesn't count).
The major drawback, because of the use of floats, is that the content must appear in the document in the order left - right - center.
Works fully in:
NN4 fails to render any space between the left and center columns. The amount of space between the center and the right columns is unpredictable though it is possible to prevent them overlapping until the browser window is shrunk considerably. The body appears to have a margin even though it does not (this is a common NN4 problem - it is fixable, but those hacks are beyond the scope of this layout). Some amount of "ghost space" may be seen inside the divs. That said, the intent of the layout structure and colours are all maintained. If you do require as much precision in NN4 as possible, try this alternative layout, 3Col_NN4_AR.
Because of NN4's loss of styling information on resizing, the layout includes some javascript to force NN4 to reload which overcomes this bug
Because of OmniWeb's failure to implement floats properly, OmniWeb would by default shift the content column over to the right in much the same way as NN4. It is trivial to hack the CSS for it to work in OmniWeb, but that would make the present code much less clear to understand since it requires the use of an additional stylesheet. Consequently this page uses javascript to write in an extra declaration just for OmniWeb. NB. using javascript to sniff browsers is highly unreliable especially since OmniWeb provides the ability for the user to make it pretend to be anything they want it to be. The other layouts (see the left column) derived from this all use the CSS hack method to cope with OmniWeb. You, of course, are free to decide not to cope with OmniWeb at all.
If you do use any of these layouts as the basis for a site, please drop me a line.