CSS Positioning: Three Specs Better than One?

One of the areas in which CSS 3 will introduce a lot of new features is page layout. This is widely considered to be a good thing. But with the W3C having just announced that there will be two separate modules for page layout in CSS 3, the standards may be asking too much of browser developers.

Rewarding as it may be to bend CSS’s positioning features to your will, I think we can all agree that CSS 2 was not designed with three-column layouts in mind. Floats and negative margins can get the job done, but they certainly put up a fight.

Introduced by the W3C as a working draft in December 2005, there’s no denying the CSS Advanced Layout module is way better than what we have now, but the apparent lack of interest from browser vendors in implementing this module suggests it might be on the wrong track. Following the release of the latest working draft in August, SitePen’s Alex Russell had some harsh criticism:

I’m not even sure if the “Advanced” Layouts [module] should be mentioned for the fear that more people might actually look at it. You’d expect an “advanced layouts” module to give us hbox and vbox behaviors or a grid layout model or stretching … but no, the “answer” apparently is ascii art.

It seems at least some members of the W3C CSS Working Group agree. Last month, the group released the first public working draft of another CSS 3 module for layout: CSS Grid Positioning.

This new layout module builds on the existing Multi-column Layout module for text columns, which saw its latest working draft in June, and which is now partially supported by Firefox 2 and Safari 3. Grid Positioning enables you to align elements to an ‘implicit grid’ defined by a multi-column element. Alternatively, you can define an ‘explicit grid’ and then align elements to that. This works by introducing a new CSS length measurement: the grid unit (e.g. 1.5gr).

The interaction between the Advanced Layout module and the Grid Positioning module remains to be specified, but it’s expected that an element that defines a positioning grid using the Advanced Layout module will also define an implicit grid for aligning elements with the features of Grid Positioning.

All this sounds great, but will we ever be able to use any of it? Even relatively adventurous browsers like Opera and Safari have steered clear of the Advanced Layout module so far, and while Grid Positioning does build on features that are getting browser support, this new layout module looks no easier to implement.

At a time when the biggest challenge for CSS is getting browser makers to invest in new features, should the W3C be watering down its ‘sales pitch’ with multiple CSS modules for doing the same thing? Or is it a good thing for the W3C to keep proposing new CSS layout standards until the browsers take an interest in one of them?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Breton

    I’ve been wondering lately if this top down approach to standards is worthwhile at all. It makes sense if you have multiple existing ways of doing the same thing, already in browsers. You then get the standards committee to pick one, or comprimise between them. Better yet, you make a browser feature, and then you submit it to the standards committee. Then we all can enjoy mutually compatible browsers after a spurt of innovation and copying. That’s how Javascript worked, that’s how the canvas tag worked, that’s how HTML has evolved and that’s how HTML5 is playing out. It seems a bit like the cart pulling the horse to have the w3c proclaiming some model for a feature which *does not yet exist*, and then expecting browser makers to invest time and money in implementing a feature set which may very well not make good business sense for them to implement.

    Don’t get me wrong, standards are a good thing, but we shouldn’t be standardizing theory, we should be standardising on models that we already know work, because we’ve been using them for years.

  • joshua

    Quick and simple…
    Can all the browsers first implement CSS 2 standards? I mean, IE is seriously lacking (especially supporting dependents and child nodes).
    Opera and IE treat margins and padding different then Firefox, Netscape, and Safari. Are we considering adding more headache for developers? What exceptions are we going to have to add now for formating upon browser detection?
    What ever happen to the days of Lynx? (just kidding about that one :)

    - Joshua
    Deserted Road Studios

  • http://www.sitepoint.com/ Kevin Yank

    @joshua,

    IE is seriously lacking (especially supporting dependents and child nodes).

    Can you be more specific? IE 7 supports the child selector, if that’s what you mean.

    Opera and IE treat margins and padding different

    Likewise, this is not true anymore if your code is standards compliant.

  • http://www.yellowshoe.com.au/ markbrown4

    This is a fascinating article. I love the possibilities that CSS3 is revealling, it’s also interesting that the developers community is playing such an active role in it’s development.

    Joshua makes a good point in that CSS2 compliance is still short in popular browsers, noticeably in IE7. While CSS2 support is short what makes anyone think that they will support CSS3 any better?

    The times they are a changing, and hopefully the next releases of all major browsers will support CSS2 fully and we can all move forward. I think Microsoft has realised the cost of their lack of standards support which has driven many people to other browsers. Perhaps IE8 will be a leader in standards support, we can hope so..

  • http://www.tyssendesign.com.au Tyssen

    While CSS2 support is short what makes anyone think that they will support CSS3 any better?

    I don’t think anyone expects IE to be of the same standard with regards up-to-the-minute CSS support as any other browser; not for the time being anyway. They are catching up, but they’re going to move at their own pace.

  • shmlco

    I’m afraid that the committees will get together and try to please everyone and then we’ll end up with a spec like SOAP.

    Many of the problems with layout in the current version of CSS could be solved relatively easily by something as simple as having an absolute positioning mode that DIDN’T take the DIV out of the flow. That way the enclosing element would then expand to hold its contents, and any other elements that might be beneath it (like footers) could be pushed down.

    Add, say, a “parent” option to height, so that a DIV could automatically expand to be the height of its parent element, and you’ve fixed 95% of the problems with footers and equal-length columns.

    I’d much rather see them recommend a few enhancements along those lines rather than attempt to design a super-complex one-size-fits-all system that’s impossible to implement.

  • Potsed

    I personally think its about time for us web developers to stand up to browsers, more explicitly IE, we all know its rubbish and yet we all bend over backwards breaking our standards compliant code, working in hacks, and generally messing up perfectly good code just to get it to work!

    It is always us web developers who end up having higher workloads, due to these incompatibilities. It’s costing our clients, who end up having to pay more for their sites due to extended development times, yes i know they are also the ones pushing to make it work on IE and the crunch is they will go somewhere else if you dont give them what they want! So again we just end up taking it.. and Browsers like IE keep getting away with a sub-standard product that we have to make pretty for them. If this was a factory, with unions etc, there would have been a strike for unfair working conditions years ago! If there was a strike, the client (customers) would have suffered at the same time, it is at that point that the factory realises they have to change their way in order to get their workers back, and keep the clients happy! We seem to have no such recourse! We are often small companies with a few developers who need to keep our clients just to survive.

    I would like to know how much it costs us and our clients in extra development time. How many man hours are wasted due to standards compliancy issues. Why can’t the major browsers decide to use one rendoring engine, whichever one doesn’t matter. I’m not talking about javascript engines or any browser specific features, only the actual rendoring engine, the part that draws to the browser window, so that we as developers can be assured that at least our sites will look the same on whatever browser the clients choose to use based on there feature sets and preferences. If they were to choose an engine, i would have to say that the opera or Konquorer engines makes a lot of sense, they are fast, probably the most standards compliant (yes i know there will be other suggestions) and in opera’s case work in the mobile world as well

    I for one am sick and tired of a fight for standards where we as the ones having to implement the sites, simply do not get heard, again opera is an exception IMHO.

  • DC

    What about borrowing the layout managers from the java (swing) world? I know a lot of the JS Toolkits have/or are implementing things like the BorderLayout. We nearly have a Grid Layout when using display: table/table-row… etc. – you have your behaviour/spec already defined (in the java world). BorderLayout would give us a 3 column layout with header and footer… just a thought

  • http://guepy.com/greg picasso-trigger

    hopefully we still aren’t dealing with a user base of 50% IE6 when this becomes a reality for the practical web designer. lol

  • http://guepy.com/greg picasso-trigger

    unfortunately Potsed … the guys paying us to create sites probably aren’t too concerned with out plight. they just want to make $ … a site is a means to an end. for most … that’s to make $ or to reach people. you can’t do that by closing the door on people.

    if you had a site that would make a couple bucks for each visitor you’d probably bend over backwards to accomodate and then say … is there anything else i can do for you?

  • Jeff Seager

    Think about your own experience as a web developer. If I’d spent as much time learning human languages as I’ve spent learning HTML/CSS, and re-learning it with each W3C revision, I’d be fluent in several world languages. This does not build confidence, as a standard should.

    As one consequence of this evolution, there are lots of nicely implemented WYSIWYG programs available that build crappy non-compliant code (by which I mean mainly that it fails to separate style and content, even if it does technically comply with an older standard). We’ve all seen the results, and experienced the headaches of updating such code.

    To qualify as a standard, any new iteration of HTML and/or CSS must be adopted and fully embraced by all browsers. That means the browser developers must participate fully. I don’t know to what extent this is being done now, but I know that Microsoft went off on its own merry tangent for a long time and tried to bully us all into adopting its proprietary ideas. That can’t happen, and I think now Microsoft has come around somewhat (their various tools still generate the most bloated and ridiculous code I’ve ever seen).

    I’ve participated in a few W3C working groups, and in my experience the folks at Opera are very involved and very astute. If there was similar commitment by Microsoft or Safari or Mozilla/Firefox folks, they didn’t identify themselves as such.

    My point is that W3C needs a process that mandates the full involvement of all major players. Only then will we have confidence in learning (again) a better way of doing things. It doesn’t do much good to invent a new language if the people you want to communicate with don’t understand it.

  • http://www.calcResult.co.uk omnicity

    Choice in a standard is never good for anyone. It is a sign of indecision on the part of the standard maker, and certainly isn’t a good thing at the moment, where browser makers appear to consider every part of the spec to be optional.
    What will inevitably happen is that IE8 will implement one single item from CSS 4 and then continue to ignore all of CSS 2, but claim to the world that they ‘Fully Support CSS’

  • DougB

    I watched earlier in the year (Web Directions North, Vancouver, BC) as Microsoft’s IE team tried to explain that IE’s next release (8.0) would be released late in 2007 to address the number of css shortfall’s (D’oh, what ones would that be…) that were apparent in IE7, their flagship browser.

    In establishing a new set of standards unless all browsers are at the table with the good folks at W3C and a goodly number of working folks (instead of rarified intellectuals who are more concerned with wording as opposed to working) there won’t be any real changes initiated, at least not any time soon. When they want to get real and give us things like 3 column layout grids, opacity that works in all browsers and containers that don’t threaten the box model then once again will I bother to get interested in re-learning what by all rights should be an excellent tool for the whole of us as designers…

  • joshua

    @kevin,

    to clarify my previous statement regarding css support in IE, many corporations unfortunately are still using IE 6. I’m honestly not sure about IE 7. But in IE 6 and the latest version of Opera, one thing that bugs me a little is the difference in margins and padding with ordered and unordered lists compared to how Firefox, Netscape, and Safari threat them. I generally have to find an easy medium, especially when I’m using pictures as bullets.

    Also, the child selector is not supported by IE in versions prior to 7.

    I know in most situations this wouldn’t matter, but I’ve been working on a web site lately for a major corporation who is still using IE 6. Of course, their web site is still HTML 4.01 Transitional too and seriously bloated with code.

    Because I’ve been testing the new pages in IE 6 and Firefox 2(since that’s what they use), I’ve not had a chance really to examine the pages in IE 7. I would hope that Microsoft IE has come a little further and I understand that Microsoft is now being more responsive to developers. I just hope that in the future, while they are “taking many roads less traveled” with new technology, they will still support the technologies that other browsers are supporting instead of waiting 5 years later to finally fully support PNG graphics.

    Sorry if I was a little unclear earlier. I hope this is a little more specific.

    Joshua Davis
    Deserted Road Studios

  • http://www.panesofglass.org/ aranwe

    @Breton,

    I really hope you were kidding about letting this evolve bottom-up. That’s why we now have to use all the hacks we have. More what you are proposing really comes down to all the browser developers agreeing to merge into one organization with one browser that we will all use. Then we can develop bottom-up, because everyone will be on the same platform. The other option is to treat each browser as a separate operating system and write ports for each browser, which in fact is just a much longer version of using hacks.

    I also agree with shmlco, that such a drastic improvement to layouts as what is proposed is unnecessary, though potentially nice. If we could just declaratively stretch an element to fill its containing element, the problem is solved for 90% of all issues. I’m not sure how many people need or want to wrap text to multiple columns. It would certainly be a nice option, but that really falls more in the realm of print rather than online media.

  • Richard Boettner

    Why can’t the world accept the fact, Microsoft doesn’t care, and neither should we. They are dieing out. Their business model no longer works and just because they are the biggest does not mean they are the best. Over the last decade they have ignored their customer base so lets not use their browser anymore, its shit anyway and I really don’t think MS is interested in supporting it in a way that is actually useful to its users. I have fought over IE’s inability to render web pages using CSS correctly when other browser do. I am tired of having to find a work-around and fixes.

    I’m calling for a global action of, Dump IE for —- (add your favorite browser or give a list). Lets just dump what doesn’t work and move on!

    Thanks.