Joho the Blog » Three-column CSS success (and a challenge)
EverydayChaos
Everyday Chaos
Too Big to Know
Too Big to Know
Cluetrain 10th Anniversary edition
Cluetrain 10th Anniversary
Everything Is Miscellaneous
Everything Is Miscellaneous
Small Pieces cover
Small Pieces Loosely Joined
Cluetrain cover
Cluetrain Manifesto
My face
Speaker info
Who am I? (Blog Disclosure Form) Copy this link as RSS address Atom Feed

Three-column CSS success (and a challenge)

If you checked my blog this morning (Boston time) you might have thought your browsing was flaky because columns were strewn hither and yon. Then, if you bothered to reload, they’d be re-strewn in random ways. Sorry. I was working out the kinks in my CSS layout.

But I’ve finally gotten it just about exactly where I want it: Three columns of equal length, with the middle resizable, and colors flush from one margin to another. Plus it seems to work as well in IE as in Firefox. It took many many many hours of work and the unstinting help of some generous readers, but it all came together when I discovered an obscure CSS capability. It’s called a table.

Ok, so I’m being a jerk. Using a table – an information structure – as a layout tool is the anti-CSS. But after breaking this page pretty badly this morning, and after losing another couple of hours of work time just trying to get it back to basic functionality, I gave in and gave up on CSS. For now. Despite the truly generous help of readers, I could not get it to work. The closest I came was to have a pretty good version in Firefox that, nevertheless, had infinite columns running past the footer. And I never got it to work simultaneously in IE, despite trying untold combinations.

I do understand why CSS is the right way to go. I spent most of the late ’80s proselytizing for Interleaf, an innovator in structured editing and declarative markup. I wrote a book on using Lisp to manage structured documents. I was one of the founders of SGML Open (now OASIS). I wouldn’t be caught dead hitting the Enter key twice to separate paragraphs in Word. I’m no expert, but I grasp the basic argument and believe in it. But I couldn’t get CSS to do what I want. It defeated me, to my embarrassment. And if someone wants to do the job right for me, I will not only thank them, I will give her a gift or donate more than that to a charity we agree on. (Talk to me beforehand so we agree about how much I’m paying.)

Here’s what I mean by “right”:

3 column layout, with columns of equal length that size to the longest column. (Compromise: The middle column inevitably is the longest.)

A header and footer, centered

The columns are colored as on this page and touch at the margins The center column’s width resizes when the user resizes the window

The “table” is centered on the page 8px padding

The user can swap in 4 different stylesheets (as per the “Colorblind” option on my home page) The user can toggle the sidebars on and off

The styles are as on my home page

Oversize elements in the center column don’t break the layout

It works in IE, Firefox, Opera, et al.

That is, “works” means that it looks like my current home page in the standard browsers and doesn’t break under normal use.

Until then, I am beaten and humiliated.

Previous: « || Next: »

Leave a Reply

Comments (RSS).  RSS icon