1st edition — by Patrick McNeil — Jan. 27, 2006
The Design Element
Columns and grids are basic design tools that form the basis of
how a layout will be structured. On the web it is nearly impossible to
avoid the usage of them.
people have figured out universal ways to generate columns in css that
will function properly among various browsers. We highly recommend you
check out A List
Apart, fu2k.org or
css based column layouts that work really well. No need to reinvent the
wheel here, instead put that energy into designing the look and feel
of the site.
Often it seems that creative use of space offers a fresh feel.
for example has only 1 column, yet it is quite wide, not something you
see very often. Another interesting layout is the one used on
, another 1 column layout. The compact nature of the site certainly
feels new and avoids the typical boredom that accompanies the standard
3 column layout.
International Herald Tribune
web site they emulate the columns you would see in a newspaper. Try resizing
web site is another that has smart resizing capabilities.
The samples below have been grouped based on their number
of columns. Some of the samples could of course fit into more then one
classification so don't get to picky on us.
A List Apart: Best 3 column layout technique
True Layout - Interactive Example
inknoise - layout-o-matic
glish.com css layout
BlueRobot layout reservoir
Max Design css based layouts
dependent layout (great for column configuration changes
dependent on browser size)