09 October 2003

Multiple Column Layout Using MT Tags

The layout of newspapers and magazines has developed into an elegant art. Web design lags behind. One of the staples of print design that the web hasn’t gotten right yet is multiple column layout. XHTML and CSS have (so far) no way to make an article automatically spill over into a second or third column.

I think, and I haven’t tested or templated this, that MovableType tags, along with a few junk divs, can be used to make a post flow into columns.

The idea, and please send me a TrackBack if you have any success, is to use trim_to and offset in your <$MTEntryBody$> to cut up each column to the same length and use multiple divs to place them where you want them.

(500 characters below is a complete guess at column length.) Something like:

<div class="col1"><$MTEntryBody trim_to="500"$></div> <div class="col2"><$MTEntryBody trim_to="500" offset="501"$></div> <div class="col2"><$MTEntryBody trim_to="500" offset="1001"$></div> 

I’m not entirely sure that offset works like this, but if not someone could probably write a plug-in. Even better, someone could write a plug-in that counts the character or word number of an entry, divides it by three, and uses that for the trim_to.

Just an idea.