CSS3 - The Story So Far

Page 1 - Advanced Layout Module

Skip to navigation


By W3C's own admission, the CSS3 standard is struggling to gain ground and is still very broken and full of holes. This article looks at what problems there are and where appropriate discussions about what can be done to fix it.

When I was at the Transcending CSS workshop hosted by the design guru, Andy Clarke, amongst the points that were raised about CSS3 was a couple I noticed in the Advanced Layout modules implementation, there are others I've probably not yet thought of. Though I would imagine there are people out there that have already blogged about that, and have a comprehensive list of these problems, but let's go through these methodically to try and uncover what we can.

Firstly let's make sure we understand what the Advanced Layout module is all about. The general idea behind it is that rather than being made to misuse floats or to use the troublesome positioning model of CSS 2.1, CSS3's Advanced Layout module is designed to help with these problems and to provide a way of specifying different parts of the site for particular content (not necessarily in a logical order either) by extending the position attribute.

Flowing Content

Content that has no position explicitly stated will use any parts of the advanced layout model marked with an "@". The idea of being able to specify specific places in a layout for content, and being letting the rest flow in the at symbol marked areas is a great idea. Just it's a shame the specification feels incomplete. To see what the problem is, let's look at an example from the W3C specification.

<style type="text/css">
  dl { display: "ab"
                "cd" }
  #sym1 { position: a }
  #lab1 { position: b }
  #sym2 { position: c }
  #lab2 { position: d }
  <dt id=sym1>A</dt>
  <dd id=lab1>A is een aapje</dd>
  <dt id=sym2>B</dt>
  <dd id=lab2>B is de bakker</dd>

Suprisingly the markup they had in the example wasn't actually valid, so I've fixed that above to include the closing tags that they omitted. Now what's happening here is that the dl is being specified as using template-based positioning - it has two columns and two rows labelled a-d. It appears that dimensions for each cell will either be a percentage of the total width and height of the dl or can be specified individually.

Without a fixed height for the body element, the UA will have to try various heights until the smallest one is found that causes the content of the body to fit without vertical overflow...

Okay, so the quote above suggests that if we overfill a cell it will force the height on all of them, so it's probably safe to assume that will be the default behaviour and we can change it using overflow property. This does start to bring us towards some conflicts in what the specification states however.

A template with more than one "@" slot is illegal.

So apparently we can't use multiple instances of @ in a template - this makes no sense! We would want multiple instances, and their example of a "nice layout for text and images that you can't get with floating" shows the use of multiple @'s. So what does it mean by saying more than one is illegal but then shows you can use more than one. It makes no sense to me!

We do also get the period symbol (.) as a way of specifying places in the layout where no content is allowed to be. This is useful for places where you want content to flow around a background image for example. From here on the advanced layout model starts to get a little more complicated, but still follows the same basic rules that other CSS rules do.