It’s been a while since I’ve touched CSS, and in coming up with the design for this blog, I was reminded again how difficult it is to use CSS to get the layout you want. It was incredibly difficult. I couldn’t get it to work and I ended up having to google around to figure out how other people had done their page layouts.

Does it have to be this way? Shouldn’t a reasonably smart person who has read the spec be able to create a layout without referring to a guru?

~

Tables vs CSS

The general idea of using CSS for layout is absolutely right. CSS lets you separate presentation from content, which is a good thing. The general idea of using tables for layout is wrong for exactly the same reason. It intermixes content with presentation, and besides, tables were originally meant to represent tabular data. There is another, more subtle reason why CSS is better than tables for layout: accessibility. With CSS, you can order your content in the preferred order for screen readers, and then use CSS to dictate where everything should go. With tables, the layout dictates document order.

However, there are some things that are trivial to do with tables that are mind-bendingly difficult with CSS. A lot of it has to do with what I’ll call float abuse.

Float abuse

There are a number of ways that people have found to create two and three column layouts that are popular on the web. Most of them rely on display: float.

Floats were originally intended to be used for floating elements such as sidebars.This is an example of a traditional use of float.They were not specifically designed to handle the overall layout of a page. Using floats to handle the overall layout of a page is not quite as egregious as table abuse, but there are similarities.

One of the problems with using floats to do overall layout is that they have significantly different rules for how margins are handled when compared with inline or block elements. If you were designing a system from scratch to define web layouts, would you purposefully make it so that the left column had different rules for margin handling than the right column? Probably not. Yet that’s what you get with floats.

The reason that margins need to be treated differently for floats is clear when you consider the original use case. Here’s a diagram from the CSS2 spec:

However, when you use floats to do a multi column layout, look at what happens to the margins. Let’s assume that A, B and C each have a top and bottom margin of 10px. Let’s also assume that B is floated left. In this case, the margins of A and C collapse, but the margin of B does not.

Worse yet, some of the wrapping rules of floats can lead to situations like this:

As bad as tables are, you rarely get yourself into situations like this with tables. My belief is that all these problems occur because floats were never designed to serve this purpose in the first place.

How should it work?

Bert Bos once mentioned to me that the CSS group had discussed doing something within CSS to handle overall layout. I don’t know what the syntax was that was being thrown around at the time, but it looks like there has been some progress on that front in the CSS3 spec. The current proposal seems a bit bizarre to me, but I am incredibly happy that they are looking at this issue. FWIW, my personal preference would be to introduce @ rules to do a container based layout hierarchy:

@layout {
    name: "threecol";
    type: vertical;
    width: 100%;
    height: 100%;
    children:
        @layout {
            name: "headerArea";
            width: 100%;
            height: 40px;
        },
        @layout {
            type: horizontal;
            width: 100%;
            height: 100%;
            children:
                @layout {
                    name: "leftArea";
                    width: 150px;
                    height: 100%;
                },
                @layout {
                    name: "mainArea";
                    width: 100%;
                    height: 100%;
                }
        }
}

#header {
    layout: "headerArea";
}

#sidebar {
    layout: "leftArea";
}

#content {
    layout: "mainArea";
}

I’m sure that the above psuedo-CSS has lots of problems, but the general gist is that I want to think about layout in terms of containment, not in terms of slots. But in any event, anything is better than thinking about floats!!

When to be practical, and when not to be

The main thing standing in the way of a new, better syntax for page layout is the real world. Can the W3C create a proposal that a whole consortium of companies agree to? Can we get this implemented in the browsers?

These are good questions, and for the foreseeable future, we may have to live with what CSS2 offers us. However, I want to make sure that pragmatism doesn’t lead to complacency. Is it great that I can now do a web page layout using standards-based CSS? Absolutely. Does CSS seem easy enough for the kinds of things that people want to do with it? Absolutely not! Laying out a web page in CSS is mind-bendingly hard. It shouldn’t be that way. People who create web pages should be jumping up and down asking for something better.
]]> http://kuwamoto.org/2006/04/26/css-is-too-hard/feed/ 13