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:

$(function(){
$('.wide').columnize({width:400});
$('.thin').columnize({width:200});
});

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:

.first.column { }
.last.column { }
.column { }

Where Did It Come From?

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