Columns
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.
Fortunately many
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
inknoise.com for
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.
Progresiv.ro
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
blancopixelado.com
, 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.
On the
International Herald Tribune
web site they emulate the columns you would see in a newspaper. Try resizing
the page, it has some cleaver javascript that resizes the columns as
needed. The
UX Magazine
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.
Sample Usage
Links
A List Apart: Best 3 column layout technique
One
True Layout
One
True Layout - Interactive Example
inknoise - layout-o-matic
glish.com css layout
techniques
BlueRobot layout reservoir
Max Design css based layouts
Resolution
dependent layout (great for column configuration changes
dependent on browser size)
