3Col_NN4_RWS_A header

Basic NN4-compatible 3-column CSS layout.

Provides:

right

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.

center

This layout is derived from an original layout by Mark Newhouse. 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 means that should probably remain just 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:

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

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

IE5 (PC) needs the central column shifting down, and in this instance the columns container needs shifting back up. This seems to be almost as random as NN4, but with experimentation and IE5 hacking it is possible to overcome.

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 if you investigate you'll see that it makes the present code even less clear to understand since it requires. Mind you, it's better than the use of an additional stylesheet or 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.) This and all the other layouts (see the left column) derived from this all 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.

Change Log