Peter-Paul Koch of Quirksmode has taken the time to explore the recently implemented CSS 3 Multi-column layout module in Firefox 1.5/Mozilla 1.8 . For those that have installed the lastest beta, it’s cool to see the feature in action.

I am very excited about column rules being added to the web designer’s arsenal of layout tools. It’s one of those features I take advantage of on a regular basis when I’m doing graphic designs. Honestly, I think it’ll open up a a lot of different layout possibilities (more horizontal layouts please!), especially for magazines and newspapers on the web.

If you want a bit of the future now, check out this script by the folks over at CSScripting. They’ve recreated the module entirely using JavaScript alone. Definitely look at the demo. It gets a raise of the goblet for sure.

HTML Form Builder
Kevin Hale

Test Driving Multi-column Layouts by Kevin Hale

This entry was posted 5 years ago and was filed under Notebooks.
Comments are currently closed.

· 7 Comments! ·

  1. Julius · 5 years ago

    I’m glad I’m not the only one that’s fond of horizontal layouts. I think my next redesign will try to implement this. I’ve seen it around, but only in nonstatic portfolio’s (where only images are involved).

    http://www.unaradio.com.ar/gaston/pingpong.htm

    The one challenge that’s faced when designing horizontally is the fact that people just aren’t used to scrolling sideways. H-scroll has always been a big no-no. In fact the term “scrolling” in general is assumed to be vertical, just look at scroll wheels (there are a few exceptions, the Mighty Mouse being my favorite).

    Come to think of it, I’ll have to test out this horizontal scroll thing. I can just imagine people asking me, “is that it?” because they failed to realize that they needed to scroll to the side.

  2. Christian Watson · 5 years ago

    Hot damn! That is a nice technique. I’ve often wanted to be able to use multiple content columns, particularly for long lists of links. Great find!

  3. Marco · 5 years ago

    That Javascript implementation really rocks. Excellent find indeed!

  4. Benjamin Horsleben · 5 years ago

    I don’t know why you only mention Mozilla and Firefox, but if all there is to the link is three columns with justified alignment, then that works perfectly well in Safari 2.0.1. So Mozilla / Firefox are not the only browsers supporting this :)

  5. Elyse · 5 years ago

    I’m excited for this; I’ve wanted to use columns for a while and have been avidly searching for the coding to do so. I’m glad to see it’s finally around.

  6. proph3t · 5 years ago

    Why is it that I constantly see your feed as updated in Bloglines, yet its just a repost of the same stuff over again? Also, when theres a new post here I often see the newest post and about 8 older posts shown as updated as well when they werent.

    Just though I’d let you know, it comes across as spamming.

  7. Ryan Campbell · 5 years ago

    We have no intentions of spam. We will have had three hosting switches, a content management system switch, and problem on our end migrating to feedburner. I think the feed problem has happened about 6 times this month, and trust me we hate doing it as much as you hate seeing it. We are trying to make our setup as solid as possible so that we don’t have to update it anymore. Kevin will be updating everyone on the status of this in the near future. We apologize in advance if this happens to you again.