Multi Column Layout With CSS and JQuery

Until we get native CSS support for multi-column newspaper-style layouts (and draft documents from a year ago don’t give too much hope…), our choices are limited to static column markup, and as has been discussed, there are problems with all of these solutions:

  1. Text doesn’t wrap from column to column
  2. Images and tables can’t easily span multiple columns

But the primary problem with these static column layouts, is that they break down when viewed on a variety of widths. There’s no good way to have multiple dynamic columns for your content. Viewing your webpage on your high resolution wide screen monitor? Wouldn’t it be nice to see it in 4 neat columns instead of 2 extremely wide columns? Viewing on your iPhone? 4 columns is impossible to read!

What’s needed is to adapt to the user’s screen width, and allow content to easily be resized and refit to as many columns as needed. What’s needed is the JQuery Columnizer Plugin.

The Plugin

Check out the Columnizer Project Page for download links and the latest news.

Check out the sample page (mostly text) and the second sample (text, links, images) to see a fluid newspaper layout in action. Resize your browser window to see columns be automatically added based on available space. 😀 The Columnizer Plugin can handly any html div, and can layout text, images, links, and nested tags into multiple columns on the fly.

The Code

So how does it work? Make sure your site is using JQuery (who isn’t?). Then, just use the newly available columnize() function, passing in an optional width:

[code lang=’javascript’]
$(function(){
$(‘.wide’).columnize({width:400});
$(‘.thin’).columnize({width:200});
});
[/code]

That’s it! Your text is now columnized with only 1 line of code!

Styling your columns

When Columnizer generates columns, it gives each column a “column” CSS class. The first column also gets a “first” class, and the last column gets a “last” class. To style your columns, just use:

[code lang=’css’]
.first.column { }
.last.column { }
.column { }
[/code]

Where Did It Come From?

Buck Wilson and I wrote it over the past few days.

4 thoughts on “Multi Column Layout With CSS and JQuery

  1. Happy to see you got it working and all the kinks worked out. Should be super handy in the future… maybe we can make a bookmarklet out of it.

  2. this is great. this will fit in nicely with my css framework.

    is it possible to get it to do ems? i think you have to create a hidden dom element and then measure the height/width to make it accurate?

    anyway it’s cool as it is. thanks!

  3. ems is a good idea, i’ll see if i can add that in the next/first update.

    glad you like it 🙂

  4. You guys have no idea how helpful I’m going to find this little piece of jquery wizardry in an upcoming project. I’ll show you it when it’s done but in the mean time, thanks a lot!

Comments are closed.