CSS Layout Sucks for Panel-Based Web Apps

01 Dec 2007 CSS Layout Sucks for Panel-Based Web Apps

Welcome to the second in my ‘This Sucks’ series (for the first in the series, see Rails Development on Windows Sucks). Before you get to alarmed about me being a negative nancy, hopefully this will be the last in the series 🙂

The topic for this week is layout with CSS. I’ve only been a recent user of CSS. As a programmer, I’ve used Swing and AWT in the past, as well as Motif a long, long time ago. So I had come to take for granted the general approach that these libraries provide for building thick-client GUIs: you drop components into a container, specify layout constraints, and the container does the rest. Sure, it could get a bit tricky at times (I’m talking to you, GridBagLayout), but once you’d mastered the nuances of a particular layout manager, you could be reasonably confident about what you’d get.

So when I arrived at CSS, I figured that there’d be something similar. When it came to specifying fonts and colours, CSS felt quite natural. But layout was another issue entirely. As I grappled with floats, positioning, margins, padding and, above all, pixel-counting, I was left with a lingering feeling that surely I was missing something. It just seemed so hard – and that was even before I had to deal with cross-browser compatibility. Spending what felt like hours trying to get two boxes to align seemed like a massive step backwards from my days of thick-client layout managers. Surely, I thought, there must be a way to do this that is more akin to traditional layout management, as practiced by AWT, Swing, Motif, and every other Windowing system that ever existed?

So I sat down with various resources and pored over them: ‘Cascading Style Sheets: The Definitive Guide’, ‘Beginning CSS Web Development: From Novice to Professional’, w3Schools. But I still didn’t get it. Perhaps I just needed to understand floats better? Perhaps absolute positioning was the answer? Perhaps just using percentages instead of pixel counts would do the trick? Finally, I bought the well-recommended ‘Head First HTML with CSS & XHTML’, locked myself in a room and read through the chapters on CSS Layout. It’s an excellent book, but when I’d finished I realized that what I had been dreading all along was now true:

CSS Layout Really Sucks After All

The authors of this book demonstrated very clearly that with CSS’s layout mechanisms, even something as straightforward as a two-column layout is impossible to do correctly without at least some sort of trade-off. And that’s even before you have to count pixels. Web designers might be quite comfortable adding widths, margins and padding together to make sure everything fits, but whenever you want to add something or change a width, you’ve got to recalculate everything. Frankly, I thought that’s why computers were invented. So much for DRY.

So I began to wonder about GWT. It seemed to provide layout managers, yet it ran in the browser. How did it do this? I looked over the generated HTML for the various online demos and the truth dawned: it uses tables for layout! But that’s evil isn’t it? Aren’t tables expressly not to be used for this sort of thing? Well, maybe, but if the geniuses at Google are forced to use tables to achieve the ends that they want, what hope do the rest of us have without tables?

So I’ve come to the following conclusion: layout with CSS is all about document flow. It’s an inherently different model from the ‘put a panel here, put a panel there’ approach that windowing toolkits take. That’s fine, but if you want to build a web application that’s more like a traditional panel-based app, you’re going to be in a world of pain. The purists might say that we shouldn’t be building such apps for the browser in the first place, but frankly, we want to maximize the availability of our application and none of the rich-client frameworks (not even Flex) are yet ubiquitous-enough to achieve this.

Unfortunately, I’m not using Java so GWT would be a little tricky for me to use. There’s also a chance that it would overly constrain my look-and-feel. However, I’m going to be looking at using tables to achieve the layouts that I want. I won’t go nuts with them (like people have done in the past) – but I think the pendulum has swung too far against them. If tables are good enough for GWT, they’re good enough for me.