CSS Stuff

Layouts

One True Layout

Want to be able to display your columns in any order? To have equal height columns without having to use faux columns? To align elements vertically across columns in a CSS-based grid? To not have to clutter your source code with presentational markup?

Here's a bunch of complimentary techniques that let you do all that - for any number of columns.

Emulating Frames in CSS

A pretty thorough article and series of examples investigating how to create the effect/illusion of frames (and then some) with CSS.

3 Column CSS layouts

After the publication of the One True Layout, the following layouts are, in my opinion, of historical interest only. Unless you really, really, want NN4 support.

All layouts have fully liquid headers.

All layouts can have footers.

All layouts are NN4-compatible.

NN4 (Netscape 4) compatibilty means that the layouts will retain the basic structure that more modern browsers will display. More or less space may occur in the various layouts.

If you wish each column to have the same font settings, you must set those settings for each column individually since NN4's inheritance model is well and truly broken.

If you want to avoid the NN4 loss of style on resize bug, you will need to include some javascript to force NN4 to reload when resized.

These are not necessarily for the squeamish since some hacks are involved.

If you don't need to support NN4, the non-semantic elements used to clear floats in some of these layouts could be removed and the easy clearing method explained over at Position Is Everything used instead.

NB. The versions of OmniWeb referred to in these layouts are those under 4.5. Now that OmniWeb (from v4.5 on) uses the "same" rendering engine, the problems noted no longer apply. Oh yeah, Safari works just fine too.

Other NN4 compatible layouts can be found at Craig Saila's site.

Experiments

Hacks/Bugs

Links

Contact

I'm Alex Robinson - if you've got anything to say or ask about anything on any of these pages, feel free to fire away. I do try to answer most stuff. Don't be too cheeky though. I certainly want to hear about bugs/problems you find. On the other hand, requests for help would be better directed to the css-discuss list, mentioned just above.

cssstuff@alex.fu2k.org

Public Domain Dedication