Sliding CSS Columns
By Chris Kaminski | September 7th, 2004 | Filed in CSS, Design, Training
Skip to comment formEric Meyer and WaSP Douglas Bowman have teamed up to develop a technique for creating multiple columns of equal height and variable width using CSS.
Eric’s discussion also includes his thoughts on the expediency of the odd layout table, while Doug frames his explanation in a discussion of the advantages and drawbacks of liquid design.
Both are must-reads.
Update: WaSP Molly Holzschlag has posted her thoughts on the technique and the use of <table>s in such circumstances. Her verdict: sometimes you just can’t beat a lightweight <table>.
She’s got a point. Sometimes <table>s do just behave better. Lately I’ve mostly been marking-up designs done by others, and thoes others are firmly in the fixed-width camp, so I haven’t had to worry so much about liquid columns. My problems tend to be vertical alignment: getting the tops — or worse yet, the bottoms — of variable-height elements to line up evenly. Perhaps I lack imagination, but I’ve not found any good way to do it. One can set a height for the elements that one hopes is enough to accommodate all the content, but one extra line of text and the whole thing goes bork.
Personally, I’m with Eric: the lack of a grid-based layout system in CSS is a head-slapper, what-were-they-thinking omission. It’s the elephant in the corner when discussing the relative merits of <table>s vs. CSS for layout. The CSS2 table-layout properties would more or less mitigate the problem, I suppose. But with IE 5 Mac & Win still about in appreciable numbers, table-layout just isn’t practical for most sites (yet).
Until it is, or until something better comes along, I fear the odd layout <table> will continue creeping into web designs. And semantics and separation of style and structure will continue to suffer.