The Philosopher's Toolbox

For now, I'm going to set the problem aside and take a shot at each strategy, beginning with forward compatibility (css for visual formatting, html for structure). Here's the first hurdle: the classic Toolbox design uses nested tables to produce a completely fluid, three column layout, without any overlap produced between the headers, columns, or footers, no matter how small you resize your window. (A nice effect, if I do say so myself). Can this visual effect be reproduced with css? Verdict: no. Or at least, not yet. The classic Toolbox layout exploits proportional sizing on table cells to give the layout its essential fluidity, and since the content of table cells never overflows the boundaries of the cell, text and graphics never overlap, no matter how small the window gets. You simply cannot make the window (and columns) narrower than their largest single content item (whether that item is a word, or an image). Its easy enough to set up a nicely fluid three column layout with CSS. The problem is that there is no reliable way to prevent the columns from overlapping when the browser window is reduced to an extremely small size. And since screen resolutions, default font sizes, and magnification vary from reader to reader, that's a problem. This isn't the fault of CSS. There's a great CSS property ('min-width') which would do exactly what I (and everyone else) needs to get the desired effect. Its just not adequately supported in the major browswers. At least as far as I understand it, from the bug lists and implementation charts I've checked. And after dozens of experiments I just haven't been able to get it to work. An alternate (and very elegant) approach would be to have the CSS spec include a new value for the 'overflow' property, which would basically make a content box behave like a table cell, such that the content box, padding area, border and margins could never be sized smaller than the largest content element. This would be a nice, additional feature to see in the CSS spec in the future. In the meantime, however, I would settle for correct implementation of the min-width and min-height properties.

Since it is presently impossible to replicate the classic Toolbox design in CSS I'm faced with a choice: (i) either I go for maximum fluidity and accept the fact that text will overlap, and backgrounds and borders will go out of alignment at very small window sizes (ok, ridiculously, undesireably small window sizes), or I settle for a 'partly fluid' design, and lock-in the widths of the most vulnerable elements (the outside columns), and let the middle column expand and contract in response to window resizing. Hmm. So many choices.