exscale.se

The CSS3 Advanced Layout Module

Published Monday, November 19, 2007 in CSS, Design

I've only looked briefly at the new CSS3 advanced layout module, but what I've read seems really cool.
Using floats, absolute/relative positioning and (negative) margins you can create basically any layout without the use of tables. But many times your markup still reflects your layout.

The markup exscale.se consists of is pretty much limited to 1, 2 or 3 column layouts due to the grouping of all sub-content widgets in the #sub-content div and everything else in the #content div. Using the new layout module I could place every widget in the #wrapper-div and still create fluid, scalable 1, 2, 3, 4, whatever-column layouts. I could move widgets around however I felt like without ever touching my markup.
With the new layout module in CSS3 complete separation of content and design is possible.

Currently exscale.se's div-structure is basically this:

• wrapper
  • header
  • navigation
  • content
    • content-widgets
  • sub-content
    
    • sub-content-widgets
  • footer

Because all the sub-content and content-widgets are grouped in their respective container-divs, there is no easy way of laying them out differently with CSS.
But with the new layout module there will be no need to group widgets based on styling because any element can be placed anywhere on the page and, regardless of source order, there will be natural flow between elements. Not like when you use absolute positioning.

So when browsers support it we'll be able to turn our div-structures in to this:

• wrapper
  • header
  • navigation
  • content widgets
  • sub-content-widgets
  • footer

And have full freedom when it comes to laying stuff out.
If you haven't seen the syntax for it then here's a basic two-column layout using the above div-structure and the new layout module:

#wrapper {
    display: "aaa"
         "bbb"
         "ccd"
         "eee";
}

#header {
    position: a;
}

#navigation {
    position: b;
}

#content-widgets {
    position: c;
}

#sub-content-widgets {
    position: d;
}

#footer {
    position: e;
}

The syntax is a bit odd to say the least, but it kind of makes sense even though it feels a bit dodgy and is basically ascii-art.

Anyway #content-widgets and #sub-content-widgets aren't actually divs (i removed them, remember?) so I'd have to specify every div individually. Which means #sub-content-widgets would be replaced with #quick-search, #recent-comments, #etc and #content-widgets would be replaced with #wrapper > div to place every other module in position: c.

There is loads of information about how widths, heights, scaling and more are set, but I haven't really read all of it, I do know there will be support for equal height elements and even built in tab-support. That's right, you no longer need JavaScript to create tabs, it's right in your CSS. And the beauty is that you can skip the totally unnecessary yet so common ul at the top of your tabs and specify each heading for each section to be the tab. Just like it should be done. Apparently there may be support for styling the actual row/column areas using a pseudo-element like: #wrapper::area(a) {background: #369; bla di bla}. That was exactly what I was hoping for when I first heard of the new module, but it's not for sure it will be implemented.

Creating drag-and-drop functionality with JavaScript could be neat as you would only need to change the element's position-property to position it in a different row or column.

Of course there's no need to actually remove your #content and #sub-content divs, but if you want full flexibility and freedom to layout anything anywhere from your CSS and never have to change your HTML then remove all your layout-divs and just put everything in your #wrapper-div.
Let's just hope they finish it soon so that browsers can start implementing and we'll have the ability to create HTML-code that never ever needs to be changed, regardless of layout.

Please read more about it as what I've written probably doesn't cover more than 10% of everything there is to know about the new advanced layout module. And forgive me if I have misunderstood something and am giving out false information.

terbon

Wednesday, December 19, 2007 | View all comments by terbon

Looks really awesome! I cannot wait until it works in IE to! This is exactly what Ive been waiting for!

Andreas

Thursday, December 20, 2007 | View all comments by Andreas

I agree. But judging from the speed of the IE-development team to bring in even CSS2 support my guess is IE will (as usual) be about 10 years after the rest of them once this spec is finalized.