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.
- Ordered Floats (see Big John's extensive essay)
It's not just a 3 column layout - it's the generic basis for multi-column layouts. It allows the content to be ordered and displayed in just about any combination you wish (here, taken to extremes). It can do all-liquid or all-fixed. Unless you require a liquid central column with fixed-width side columns, the other layouts here are of academic interest only.
- 3Col_NN4_FFFF
3 col layout (liquid or fixed width) through ordered floats alone - the page is dynamic so you can play with the settings
- 3Col_NN4_FMFM
3 col layout (liquid or fixed width) through ordered floats with some help from margins - the page is dynamic so you can play with the settings
- 3Col_NN4_FMFM_B
As 3Col_NN4_FMFM but with column dividers created by background images
- 3Col_NN4_FMFM_C
As 3Col_NN4_FMFM but with equal height columns created by background images
- Sturdy 3 col layout with high degree of precision, liquid central column and fixed-width or liquid side columns. And a tolerable amount of hacks.
- 3Col_NN4_RWS_A
The basic sturdy 3 col layout
- 3Col_NN4_RWS_B
A totally liquid 3 col layout with column dividers derived from 3Col_NN4_RWS_A
- 3Col_NN4_RWS_C
Flexible column tallness through background images, once again derived from 3Col_NN4_RWS_A
- 3Col_NN4_AR
3 col layout with a liquid central column and fixed side-columns, total precision but less overall power. Also requires a hefty amount of hacks. If NN4's display still diverges too much from other browsers for your needs, forget a css layout - use a table and simply style the elements.
- 3Col_NN4_P7
A very simple 3 col layout - and with a more flexible column order
Other NN4 compatible layouts can be found at Craig Saila's site.
Experiments
- Recursive Spiral
A collection of recursive spirals in XHTML/CSS
- Eight Ordered Columns
A random riff on the theme that the ordered float model is a generic multi-columnar model rather than just a 3-column one. And it can stack the columns if necessary.
Hacks/Bugs
- OmniWeb Inline Hack
A way to target just OmniWeb (well, and Amaya) without resorting to an additional external CSS file
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