The ultimate multi-column CSS layout

Alex Robinson goes In search of the One True Layout and finds a technique that allows for fully flexible source order of columns, equal height columns, and vertical grids – all in the same layout. Despite a bug in the latest builds of the Gecko rendering engine powering browsers like Mozilla and Firefox, this is looking awesome.

  • October 26, 2005
  • Comments closed
  • Posted in

Comments

1. October 26, 2005 by Jesse

I have been playing with multi-column grid layouts recently. We have 3 columns pushing another section with 4 or 2 and it has just been fun figuring out. Oddly I had a simple layout that seems to work in all but its not percentage based -- yet. It is similar to what is posted there. Anyway, only public try at things is here:

http://www.uwaterloo.ca/media/billgates/

More complex ones should appear next week. The floating is fun.. and DW 8 renders these things nicely.

2. October 26, 2005 by dreamer

It might be just me, but the source code on some of the given examples gives me the creeps. Some of the techniques used are, each on itself, worth considering. Yet, in my opinion, such a thing as "One Layout That Rules Them All" just doesn't exist, if it is supposed to fit everyone it won't completely fit anyone.

3. October 26, 2005 by Steve Williams

Timely post me for Roger!

I've been struggling to add a minor feature to one of my layouts that works fine, but not quite how I want, so thanks :)

4. October 27, 2005 by Robert Nyman

Just to offer alternative approaches as well, I want to share The ultimate guide to CSS-based column layouts I wrote some months ago.

5. October 27, 2005 by daniel

Thanks, I have been thinking about this topic lately.. By the way, is there any problem to use this approach for a 3 column layout ?

div:float left, width:200px

div:float right, width:200px

div:middle, no float, expanding width

I mean except that the source order might not be the intended It works fine in FF and IE 6..

6. October 29, 2005 by Mats Lindblad
5. Try this: Three layouts that work, they all put the content first which was my main goal.

Sorry, comments are closed for this post.

Information, sponsorship, and externals

About the author

Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.

Subscribe

Looking for web hosting?

Try DreamHost!

Use the promo code 456BEREASTREET3 to save USD 20 when you sign up!

Latest articles

Validation statistics from Nikita the Spider Comments off
An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
Authentic Jobs API and Affiliates program Comments off
The Authentic Jobs job listing service now has a public API and an affiliate program.
What does Acid3 mean to you and me? Comments off
Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
Designing Web Navigation (Book review) Comments off
Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
DOMAssistant bundle for TextMate Comments off
To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
First impressions of Internet Explorer 8 Beta 1 Comments off
My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.

More articles

Favourites, here and elsewhere

Affiliation

  • NetRelations
  • Kaffesnobben
  • Dagens recept
  • 9rules network member

Support this site

Show your support by buying a book or two from SitePoint or getting me something from my Amazon Wish List.