No seriously, hear me out on this one. The idea behind CSS is good: abstract away the presentation from the data. Theoretically, you can change the presentation without touching the underlying document structure just by editing CSS. The problem is that there are far too many gaps in what CSS can do. We’re told not to use tables for layout, but since pure CSS cannot effectively duplicate all the layout options we have when using tables, how can that be the way we develop things?

Take the following condition: a three-column layout where the last column is a fixed width and the other columns should each take up 50% of the remaining width. Oh, did I mention that there should be a ten pixel margin between the columns? I could create a five column table with the widths set to 50%, 10 pixels, 50%, and 300 pixels…that will work (with some finagling). How do I do that in CSS? Using YUI Grids, which can give you some of this (the fixed right column and the percentage-based widths) but not all of it (the 10 pixel margin in between the columns) because the margins are percentage-based as well. You can’t simply float four elements because there’s no way to make all of the columns add up to the complete width at all window sizes and still maintain the flexibility of those two leftmost columns. And then the floats will wrap, which I never want to happen.

How is it that CSS can suck this bad? It started out so promising and somewhere fell woefully behind the times. Why is it that creating multi-column layouts still requires trickery and some magic even after all this time? And why can I still not achieve the same type of layouts that I could easily do with tables?