Supersonic Man

October 19, 2011

my phonebook app… CSS+JavaScript for multicolumn layout

Filed under: Hobbyism and Nerdry — Supersonic Man @ 5:03 pm

I used to have a little Access database of contacts — people’s addresses and phone numbers and the like.  I had a little Access data entry form, and designed a report that listed the important names in tiny print that I could fold up and carry in my wallet.

When I got my current computer, “Knuckles”, I didn’t have MS Office on it. I tried to make do with Open Office.  The Word and Excel replacements work pretty well (except for file format issues), but the Access substitute, “Base”, is hopeless.  After endless struggling I was never able to load my phonebook and edit it, let alone replace the report layout I had.

But recently I installed Visual Stupido 2010, in case I had to take work-at-home jobs to get any employment.  And to re-familiarize myself with my slightly rusty skills, I made a little web app which accesses that phonebook.  Copying the data into Sql Server Express was way easier than trying to get it into OOo Base.  It didn’t take long to make a web form that let me modify records, and I even made a page that, with stringent CSS, lays out the small-print report for wallet-sized printing.

Now this report layout requires the items to flow in multiple columns like a newspaper article.  This is notoriously not well supported in HTML.  But I got it to happen… it turns out that CSS 3 includes column-flow features, and both Firefox and Chrome now have provisional support for it in place.

But IE doesn’t.  Nor do most out-of-date browser versions.

Fortunately, a guy named Cédric Savarese found a way to do it in JavaScript.  So I downloaded his big ol’ script and tried it.  Disaster — he’d never tested anything remotely like the case I was using. His script made a hopeless mess.

So I fixed it, and added features.  Here it is.  And here is his original page about how it works.  This code is redistributable under LGPL.

So thanks to Cédric and I, if you want to have newspaper-like flowing columns on your website, now you can.



  1. I retired this phonebook app once I got a smart phone. I just use its contact database and the Google contact list that it gets backed up to.

    Comment by Supersonic Man — May 7, 2014 @ 5:11 pm | Reply

  2. Like I said, I’ve been assimilated into just using the Android/GMail contact database. But I do miss one area where my little database was a bit better: handling a single phone number or address shared by two names. Mine would produce a single listing saying “John & Mary Smith” or “John Smith & Mary Jones”, depending on whether the last names match.

    For the wallet-size printout, I now just use a word doc edited and synced by hand. It’s only one page and doesn’t change often.

    Comment by Supersonic Man — December 12, 2014 @ 6:52 am | Reply

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Create a free website or blog at

%d bloggers like this: