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.

Posted on October 26, 2005 in CSS, Quicklinks

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.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.