Joho the BlogThree-column CSS success (and a challenge) - Joho the Blog

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: »

11 Responses to “Three-column CSS success (and a challenge)”

  1. This might be a good place to start:

  2. Allow me to contribute to whomever gets this right for you — and then use the code, too. I, too, have surrendered in the CSS three-column wars, trying for hours to build a 3-column layout in Movable Type.

    Actually, I’ve achieved a form of inner piece in accepting my web skills have plateaued with tables!

  3. I’ve spent many hours trying to do exactly this for my own site. More power to you if you can get it to work!

  4. Wonderful. I love the improved use of real-estate and the flexibility I have by controlling the width of my browser window. This is very nice. Thanks for the smaller margins on the sides.

    I’m still not able to dial the font sizes up and down in the content (though it works on the top banner). I think this has to be with absolute sizes being specified in the HTML. I’ll take a look at that later.

    I would use this scheme with my blog for sure. Thanks for the effort. Yes, tables have their use.

  5. I isn’t my place to say “I told you so” (Damn! Did I type that? And my “backspace” button is inop! Ignore the previous phrase.) but I work with (Not design; I let the gurus with no personal life handle that.) and maintain (OK, I do use CSS but find HTML more universal and quite adequate. And NO WYSIWYG editors.) several websites. Virtually (No pun intended.) all of them are in three column format. None of them do it with CSS.

    Why? Because, as you discovered, you can’t make it universally displayable in all browsers. The W3C tends to force all browser software designers to treat HTML the same. Who’s makin’ ’em treat CSS the same?

    Sometimes Big Brother helps. Just like the lids on peanut butter jars: blue is chunky and red is creamy. Or diesel nozzles are all green. Someone made these things happen.

    OTOH, tarps are all colors. And tires are all black. And screwdrivers are a rainbow of colors with no ryhme or reason; the least “they” could do is make some color code for right and left handed screwdrivers! Why can’t some organization of manufacturers (or whoever) sit down and standardize all these things? Color code them for size and function or chaos will continue to reign.

    Old Bogus, the Colorado Curmudgeon

  6. You’ve just discovered the dirty little secret. CSS is broken. And the biggest break is that it can’t cope with what must be the single most common overall page layout. I’ve tried and tried and tried to do the same thing you have and also given up.

    By all means use CSS and try and avoid using tables when CSS works. But it’s pretty much impossible to do the gross layout of a 3 column website without one big table to handle it. float, mixes of relative and absolute positioning and fake negative margins just don’t cut it.

    So what are the chances of CSS3 including gross layout controls that actually work for web designers?

  7. Hi – saw this post and sympathised: I’m waiting for someone to do an MT template and just use that. For someone who’s willing to cut their own code, check out this “floatorial” that I was emailed today from Carson Systems – fits the bill apart from the all-browser bit.

  8. David,
    The nasty secret is out. I long ago came to the conclusion that CSS was designed by computer scientists, not by designers. This is why it handles inheritance perfectly, but can’t handle a 3 column layout.

    While you were selling Interleaf, I was a typesetter making books, magazines and glossy brochures and company reports, but I am now the non-proud owner of several websites with CSS 3 column layouts that fundamentally don’t work at some level.


  9. The emperor has no clothes. It’s a simple as that.

    At a company I worked for a new hire bullied the manager into forbidding tables. “Use web standards. Real web designers never use tables.” So I wrote a PERL script to fetch the home page of the 100 most popular sites on the web, virtually all of which use tables for layout–usually quite a few. Where do real web designers work? Apparently not at Yahoo, Google, MySpace, Flickr, the BBC, CNN, Amazon, eBay and on and on…

  10. Oh my goodness, keep it down… You don’t want the code weenies to hear you…

    Why such wholesale loathing of tables and yet where is the hatred of bu||$h!+ CSS hacks?

    They want to kill this innocent man named Spacer Gif and yet they casually toss out IE5 box model hacks and shameless NN4 workarounds.

    In the words of the famous web coder/designer Rodney King… “Can’t we all just get along?”

    I agree 1000% with the post of Julian bond and some of the others (thanks for having the guts to say it…) CSS can’t even build a 3 column layout…that’s only the backbone of western information architecture dating back to I dunno the guttenberg bible!

    Also since we should only use tables for tabular data and since they were never meant for design, lets apply that thinking to everything else:

    1. Don’t use highways, (originally built for the military)

    2. Gunpowder: (Made by the chinese for fireworks)

    3. The Internet itselt (Government, Scientistists Math and University people)

    4. Sex (A means of procreating the species, enjoyment is just a side benefit, now we should use CSS for that instead)

    5. Jeeps & SUV’s (A military vehicle not built for our current use.)

    6. Recycled tires and plastic jugs (Destroy all those bird feeders, repaved roads, sneaker soles, oil nameless other things — tires and plastic jugs weren’t meant to be used for other things.)

    Seriously: Please let me know of any links to web/code where people use as much CSS as possible but can leave their ivory towers every so often to code with a table if necessary.

  11. Well now this makes me feel so much better, here I thought it was me who didn’t know his way around code to save his life (which is still true by the way) and I find all these people who are coders who can’t do just what I’ve been swearing about for the last three days.

    Thankfully I’ve not been using my real index page, but knowing what a pain I’ve had in the past with MT and CSS I made a test pilot – just a mess. I will now go learn how to use tables

    thank you for making me feel a lot better about myself.


Web Joho only

Comments (RSS).  RSS icon