CSS layout: soon good enough for GUIs

Update 2011-01-24: The ultimate CSS layout spec for webapps


One of the sore points of Ajax has always been layout: CSS is great for document layout, but sucks at GUI layout. Where Java layout managers such as the grid-based JGoodies FormLayout (PDF) work really well and can do things such as “make this grid cell as narrow as the content allows”, CSS currently needs absolute length specifications. Furthermore, letting an element fill out all of the available space is really tricky, especially when done vertically. Thus it is no wonder that layout was ranked high on the OpenAjax browser wish list. Thankfully, the W3C is hard at work at fixing this problem and it seems that all the major browser vendors are on board (if you look at the editors).

• CSS Template Layout Module: lets one specify grid-based layouts in a really neat ASCII-art-like way. Go to “CSS Template Layout demos” to see examples.
  
• css-template-layout: implements template layout in current browsers via JavaScript.
• Flexible Box Layout Module: is “based on the box model in the XUL user-interface language used for the user interface of many Mozilla-based applications (such as Firefox)”. To get a grid, you need to nest several boxes. I prefer template layout's more direct approach.
  
• CSS Grid Positioning Module Level 3: mainly for document layout (multi-column layout etc.).
  

According to sources of mine, the W3C will try to consolidate these three proposals as much as possible, but might have to keep two, because GUI applications and document layout have such different requirements.