...one structure—many designs...

symmetric 3-column.

This is an ordinary 3-column with ordered source code, making the content flow the right way. Main content (this column) comes first, and all headings are in the right place.

No need for "skip nav" or "skip to (main) content" here, so there isn't any. No need for clearing-precautions either, since this is a "float / non-float" construct which isolate all parts of the page.
Note: I use lots of clearers that has "html default layout", because "smart" clearing-methods doesn't look right to me in non-CSS browsers.


Only the center-column will adjust in width. I've found scaling width counter-productive, as it will only make content scale off screen or push it into tight corners. It may look nice to be able to zoom the entire page, but real zoom (in Opera) doesn't work that way.

This page will flow fairly well across screens / browser-widths from 640px and upwards. That should cover some ground.


I'm sure there are a few IE-bugs left here, but I couldn't find any. Smashing IE-bugs is fun—can't wait for the next set of bugs launched by Microsoft...

sincerely  georg; sign

Hageland 29.nov.2004


This is add1, and it is second in the source-code.

I can hardly call this an equal-height 3-column design, but it is styled to look and behave like one.

The structure is styled for debugging, with borders and transparent backgrounds. Nothing has to look this way on a real web page.

add2 is the short name of this column, and it is third in the source-code.

It is slightly less than 150px wide.

…for 2005