Please don’t take this the wrong way but CSS layout as we know it today well frankly it sucks a bit. I mean, consider the grief we go through to get multi-column designs working? Hacking around with floats? Changing the order of our content to make it work just right?

It’s more powerful than misusing <table /> once was (and obviously cross-device compatible, accessible and so forth), but you could have it so much better.

Introducing the CSS3 Advanced Layout Module. It’s a working draft and it’s very open about the fact that there are a number of ways to make it all work. But it exists, that’s the main thing.

Most interesting in the new module is what’s been called Template Based Positioning, which allows you to define grids. Grids have a slots, and you can place any element on the page into a slot. That’s content order independence covered, by the way.

Here’s an example quoted from the draft (please note that I’ve reformatted the CSS for legibility):

Here is how the zunflower design of the Zen Garden could be done:

#container { display: "abc" }

#intro {
  position: a;
  margin-right: -2em;
  box-shadow: 0.5em 0.5em 0.5em;
}

#supportingText {
  position: b;
  box-shadow: 0.5em 0.5em 0.5em
}

#linkList { position: c }

If you read down the Templates draft you’ll notice that the syntax gets rather more advanced that than too, but this preferred syntax isn’t really too far removed from drawing the layout with ASCII art. Sounds a bit hacky, perhaps even silly but I think it’s a good move; it’ll be very easy to explain and grasp. Much similar than a reworked implementation of the <table><tr><td colspan="12"> syntax, certainly.

Another couple of examples, this time mine. This means they might be wrong, but I think I understand it right. You’re very welcome to view the CSS of this page to see how the layout is done at the moment. In theory, layout could be reduced to this:

body {
  display: "aa"
           "bc";
           "dd";
}

#header { position: a; }
#content { position: b; }
#sidebar { position: c; }
#footer { position: d; }

I hope you can see what I mean when I say that this might just be crazy enough to work. Grids can also be defined for other elements, not just the body (or html). For example, rather than floating the accompanying graphic that appears with my posts, I could (if I wanted) do this:

#content .post {
  display: "@a"
           "@@";
}

#content .post img.splash {
  position: a;
}

@ represents any content that isn’t otherwise positioned in a named slot (so the image is placed in a and everything else in a post flows through the @s). The syntax is then further extended to specify widths on these slots (my examples above aren’t complete for rebuilding this site as widths would be divided equally).

The benefit in this example over using a float is zero, unless I wanted to include the splash image somewhere else in my code than at the very top. But it has rather fancier applications that can be covered another day.

This is a huge, huge, huge thing for CSS. Having a simpler and less quirk-prone layout model will make all of our lives easier, and should make CSS easier to learn as well. Once it’s implemented (yes, I know).

There’s lots of work to be done, and obviously we’re a way off seeing an implementation (but if there’s demand I guess we may see something testable in medium-term Gecko or WebKit builds). Comments are welcome to the CSS public mailing list as usual.

(The accompanying image is India by Omnia Mutantur on Flickr. Used with permission.)