This week the CSS3 working draft of the Advanced Layout Module passed by during a web surfing session. I think every webdeveloper which uses div-elements to define a grid layout, must agree with me that things become more complex and time-consuming when the grid-layout becomes more complex. The main reason for this is that you have to deal with a lot of floating issues and inevitable changes to indenting and text/images sizes influences your grid as well.
In the working draft an alternative way to define a grid layout is proposed: Template-based positioning. I can describe it here in my own words, but I couldn’t do it better than how it is done in the working draft:
The properties in this specification work by associating a layout policy with an element. Rather than making an element lay out its descendants in their normal order as inline text or as blocks of text with margins (the policies available in CSS level 1), these policies cause an element to define an invisible grid, in which descendant element will be placed. One policy also allows elements to be stacked similar to tabbed cards, of which only one is visible at any time.
Since layouts on the Web have to deal with different window and paper sizes, the rows and columns of the grid can be made fixed or flexible in size.
The typical use cases for these properties include:
Complex Web pages, with multiple navigation bars in fixed positions, areas for advertisements, etc. Complex forms, where the alignment of labels and form fields may be easier with the properties of this module than with the properties for tables and margins. GUIs, where buttons, toolbars, labels, icons, etc., are aligned in complex ways and have to stay aligned (and not wrap, for example) when the window is resized. Tabbed dialog boxes, with only one “card” visible at any one time.
Here’s is a simple example of using template positioning for defining a three-rows grid layout:
body { display: "aa"
"bc"
"dd" }
#header { position: a }
#navigation { position: b }
#body { position: c }
#footer { position: d }
<div id="header">
<div id="navigation">
<div id="body">
<div id="footer">
In the above example you can see that the grid-layout is defined in the body element using a display attribute that defines the tabular structure of the grid. The position property is used to fill the slots with specific content.
One of the advantages, in my opinion, of template positioning is that the structure of the grid can immediately be infered from the display property. When float and clear properties are used this becomes more difficult.
Because the specification is still in its working draft stage (even the examples are still in Dutch 
), I think it will take some time when the common browser vendors have implemented it so you can use the concepts in your web design. Nevertheless, the ideas in the proposal sounds great to me.
April 8th, 2007 at 00:43:02
[...] Andy Budd’s talk on the future of CSS was exciting but about the only thing widely supported in CSS3 currently seems to be the opacity elememt. Other interesting elements that will be supported eventually are border-radius for rounded corners and box-shadow for drop shadows. The Advanced Layout module looks like it will blow the current CSS layout methods out of the water with it’s grid system for layout and re-ordering of the content. Slightly dis-heartening was Andy’s complaints about the workings of the CSS Working Group: the snail-like pace it operates and the possible influence of Big Business on it’s decisions. [...]
September 28th, 2008 at 05:01:30
I am very excited about CSS3, it is the biggest advancement in CSS in years and will bring it up-to-date with today’s demanding web sites. Yes, the ALM needs some work but remember, even after that work is complete it will still look relatively similar to how it looks now (eg. Dutch). Ever seen the CSS 2 standard? The standard is only meant to be an abstract idea of how the display elements should work. While more examples may help some people understand it, simplifying the wording will only cause browser developers to get confused and may not implement the standards in the same way (which was a major problem with CSS 1 and 2 and to a much, much smaller extent in 2.1). You need to realize that the standard has to follow the developers’ needs most. They have to think in strict computer terms (if.. then, true.. false, do.. while, etc). I am sure by the time the draft is ratified it will contain more visual examples. As for the use of intrusive elements, well you will just have to define how you want that layout to look first and make sure you are not using elements with different sizes. For example an image that floats in the middle of the page. If that image changes with each load/refresh just make sure all images are of X width and Y length so that the size of that element does not change. It is really not much different that a float left or right today. It essentially creates a way to “float: center” any element(s) (without actually using “float: center” — which would limit creativity and designs).
September 1st, 2010 at 07:20:23
I just do not seem to comprehend your point of view. Are you sure we’re conversing about the same subject matter?