A 'fluid' or 'liquid' design is some kind of 'holy grail' of web design. This site is an example of such a fluid design: the entire browser-screen is used for the website. Fluid design often has a drawback: on high screen resolutions, the lines tend to get very long. That reduces the readability.

Multi-column solutions with new problems

Printed media, such as newspapers and magazines, solve this problem by using multiple (text) columns on a page. Unfortunately, there is no real multicolumn-support in current web standards. Therefor most sites use a fixed (narrow) width, and/or 'simulate' columns in HTML. Both solutions are not dynamic: on higher resolutions there's still quite a loss of 'screen real estate'.

The upcoming CSS3 standard provides webdevelopers with Multi-column support ↑. But the standard isn't even final yet. Worse, Microsoft tends to be very, very slow at adopting the standards in their Internet Explorer webbrowser, if ever.; IE7 doesn't even support the current CSS2.1 standards properly, let alone CSS3.

To overcome this problem I wrote a multi-colomn text reflower script.

Features

• Automatically calculates the number of columns possible, given a minimum width for the columns and fits them into the containing box.
• You can also preset the number of columns you want.
• Vertically justifies the columns, by splitting the text and evenly distribute it over the columns. The "printability" is maintained.
• Automatically reflows the text when browser window is resized.
  
• Uses clean, easy and elegant HTML and CSS which degrades gracefully without JavaScript and/or CSS.
• Doesn't use JavaScript's document.write, but uses the W3C DOM. So it also works in XHTML 1.0 Strict and XHTML 1.1 with application/xhtml+xml content type.
• BSD-style licensed. You're welcome to use it on your site, for free!

Supported browsers

• Opera 8+
• FireFox/Gecko 1+
• Konqueror/KHTML
• Safari/WebKit (Requires up-to-date version of both Safari v2 and v3!)
  
• Internet Explorer 6+

What it is NOT

This script does not process CSS-styles to try to emulate the CSS3 multi column behaviour. So, you can't use CSS3 code, include this script, and expect it to automagically work in the supported browsers, like what Dean Edwards' IE7 script ↑ does for CSS2 in IE6. You'll need to configure it separately and take care of the (X)HTML-requirements.

Examples 

Of course, this page uses the Multi Column script. Try resizing your browser window and see what happens! And yes, I still need to integrate this technique in the rest of the website :)

I also made a special demonstration page ↑ of the script in action.

What's new in v1.4 (1-6-2007)

• Added/fixed heading-wrapping. An orphaned heading at the bottom of a column is moved to the next column.
• Improved the embedded HTML example in the source. It's now much more complete, and perhaps even useful!
  
• Some code cleaning.
  

Download 

You can download the JavaScript code ↑ directly from here. (v1.4, BSD-style licensed).

For more information and usage, see the javascript code.