Layout Revolution

Published 19 years, 1 month past

Recently, Alex Robinson published an article titled “In Search of the One True Layout“, and it basically turns the conventional wisdom about what CSS layouts can and can’t accomplish on its ear.

One of the article’s primary aims is nothing less than enabling multi-column layout using no extra markup (beyond a div to enclose each column’s content) and allowing the columns to be in any document source order.  Impossible?  No.  It appears to have done just that in all current browsers, and several non-current browsers as well.

Assuming this technique stands up over time, and I see little to no reason why it would not, this is a truly major development (and that’s an understatement).  There is a problem in recent versions of Gecko-based browsers which you can read about in Bugzilla entry 312777.  The problem has been fixed in very recent builds, but the question is whether or not the fix will make it into Firefox 1.5.  In comment 40 of that entry, one of the engineers indicates that having web developers put in their thoughts on the importance of this fix would be welcome.

Now, we don’t want to create a stampede here.  However, if you have a Bugzilla account and your assessment of the importance of the bug varies from the comments posted, or you have something new to add to the comments, then by all means contribute.

Getting back to Alex’s article, it also tackles the desire for equal-height columns in a tableless design environment.  Then, just to pile it on, Alex knocks out a way to create vertical grids without tables.  Later on, he ties it all together into one neat, shiny package.

So that’s basically killing three long-standing frustrations of standards-oriented design with one stone.  Any one of them is notable in its own right; put the three together, and I’m pretty much emerald green with envy over here.  It might just be time for me to consider hanging up my spurs, folks, ’cause it looks like there’s a new sheriff in town.  And he’s packin’.

Comments (31)

  1. The bug with Firefox is currently the only reason I haven’t started using this technique in the site’s I develop. If it’s fixed in the final 1.5 release and since bugs in alpha/beta versions are irrelevant, I’ll start using it almost immediately. If it’s not fixed for the final release, then that will pretty much seal it’s fate as virtually unusable for a long time.

    Other than that, it is certainly a significant step forward for CSS development.

  2. Hmm, is this supposed to be something new? Why would nobody else ever have, like, read the CSS spec?

  3. Hmmm?: Reading the spec is one thing. Coming up with a technique to achieve the desired result in a standards compliant way, given such a wide range of notoriously buggy browsers, none of which fully implement CSS 2.1 yet, is a completely different issue.

  4. Lachlan (comment 1) – it is not that bad, there is an alternative, as Alex points out in the article, which I contributed to develop. Granted, not as efficient (that one won’t work for vertical grids, unfortunately), but if works quite well for equal height columns (simple demo — works in Gecko 1.0+, Opera 7.2 up to 9, iCab, Safari, IE mac and win).

    But I agree otherwise, that bug has to land on the Gecko1.8/Firefox1.5 tree. I’ve tested the patch with my home made trunk builds, and it works well, without regressions.

  5. Fascinating techniques and very well researched; the sheer amount of patches needed for just about every browser out there is tempering my enthousiasm, though. Especially the huge padding/negative margin technique strikes me as les-then-elegant.

    Still, a deep bow to Mr. Robinson for working out and publishing these techniques.

  6. What a beautiful tutorial! I find it truly amazing the number of brains working on making CSS truly work for what it’s meant to do. I find myself drooling at the number of articles I find each day to read and soak in. There’s almost too many.

    The standards community is a wonderful group of people and I just have to applaud everyone for their contributions.

    And, Eric, don’t hang up your spurs just yet! Most of the standards thinking that I have now have been inspired by you! Now if I can only get my website looking the way I want!

  7. Remarkable. A true gem for the web developing community. Thanks, Eric, for posting about this article.

  8. Well I am excited at the prospect of reading this – if your impressed Eric then I already am.

    But reading some of the comments has put a slight dampener on it.

    But the promise is exciting –

  9. Shortly after reading this article, I stumbled upon an apparent IE bug relating to this layout. This bug is discussed here:
    http://www.webmasterworld.com/forum83/7829.htm

    I’m hopeful that another obvious solution will present itself. :)

  10. As impressive as it is, this reminds me of Netscape4/IE4 hacking somewhere in the 90s of a previous century, only have we moved on from HTML to CSS.

    The real world implications for a layout like that is wonderful though, but if one thing is perfectly clear, it is that browsers, browser makers and the CSS spec writers have got a lot of work to do before we can make any kind of site using CSS in an elegant and intiutive way; I mean, do you see Adobe and Macromedia spit out code like this from their respective (often used) products?

  11. Did Eric Meyer just make a country western analogy? What is going on here…

    I too was very impressed by Alex’s article the other day. I’m looking forward to implementing this “all for one, one for all” layout in the near future too, though I’m not using Firefox 1.5 at all right now (I suppose I should at least have it installed somewhere for testing purposes).

    Now don’t go hangin’ up them spurs just yet, partner. There’s room for more than one sheriff in this here town.

  12. Update: It appears the bug I was concerned about may be the Guillotine bug, which can be fixed. :)

  13. It’s a great technique. I just wish it worked on versions of Netscape before 8. I know of quite a few people who use Netscape 7-7.2.

  14. The fix has been checked into the 1.8 branch about an hour ago. So Firefox 1.5 will have the fix :-)

  15. Hi

    The power of CSS is amazing. I”ve seen a few sites like this one where i”ve been blown away by what you can do. Alot of DHTML and other funkiness can be avoided if your clever with your stylesheet.

    I want to manage a stick up footer on the website for IE 5.0 +. with CSS As you can see 1 on bmw.co.uk

    thanks

    Imran

  16. Pingback ::

    damo’s workspace » Blog Archive » 3 column layout problem explained

    […] e columns whilst having two columns with fixed widths blah blah blah. I just read a post on Eric”s blog and he links to an ar […]

  17. There is great news: the patch for Bug 312777 has landed on the branch tree! That naughty problem will be fixed for Firefox 1.5 rc2.

    Thanks a lot to the Mozilla engineers.

  18. Eric, thanks for this article. It helped me convince the Mozilla drivers to fix the regression. As Philippe says, it should be included in the final 1.5 version.

  19. Today, at the Carson Workshop in Chicago, Eric went over this layout technique – it wasn’t even on the schedule of topics – and we saw him code this live. Amazing!! Taught me something I can use on a project I’m working on right now.

    Thanks, Eric for taking the time, going over this technique, and impressing us all (even yourself)! ;)

    Once again, the seminar was fantastic!

  20. Eric, Thanks for going through the “One True Layout” yesterday at the Carson Workshop. It was very interesting to see you work through the differnet aspects of the technique. It’s not often you get the opportunity to see an expert go through their problem-solving methods.

    During a break I asked you about a new text editor, TextMate, so I thought I’d pass on the link [ http://macromates.com/ ] It’s has some very nice features that haven’t made it to BBEdit… yet.

    Thanks again for a great workshop. – Ed

  21. This looks promising. It’s my first reading of anything on the PIE site. Frankly many of the CSS techniques take so much subtle hacking to make them do what you want on most of the browsers in use that I despair of using them other than experimentally.

    CSS was supposed to make it *easier* to do great visual things in browsers, right? Browser incompatibilities have sure made a nightmare out of doing simple things.

    Just read something like their “How To Clear Floats Without Structural Markup” if you’re feeling good about using CSS-p… it’ll cure that feeling. (or send you running back to html tables)

    This comment isn’t to denigrate the efforts of css gurus like you all, your work amazes me… just that all these complex hacks shouldn’t be needed… ok, yeah, it’s not a perfect world… grumble, grumble… ;-)

  22. After seeing him work his mojo live in Chicago I think it is still safe to say Eric is the the “mojo-man.” I was just amazed at how he put certain things together and the live walkthrough of the one true layout was just astounding.

    I’d definitely say I got my money’s worth out of that one…

  23. Pingback ::

    o [cc] do [caiocesar] na [www]

    […] linques interessantes 8.11.2005 | 22:12 – netvibes agora tem suporte ao flickr – a busca pelo “o layout” analisada pelo guru eric meyer […]

  24. Jeff, I have to agree with you there. I just wish I could hear the conversation that Eric and Alex have probably had by now. After all, Alex did pretty much ruin a good chunk of what Eric was going to discuss.

  25. I’ve only looked closely at the equal height columns thing, but I think it’s freaking *genius*. I’m using it on some navigation tabs, and it’s quite beautiful (much less padding needed for those, as beyond about 4ems tall it isn’t worth worrying about).

  26. The firefox bug has been fixed in the newly released 1.5 RC2 :)

  27. Pingback ::

    torresburriel.com » Lecturas sobre hojas de estilo y est

    […] no, el martillo del navegador de moda. Any Order Columns Meyer on Any Order Columns Layout Revolution Multi-Unit Any-Order Columns An Open Letter to Disney Sto […]

  28. Fantastic, thank you for sharing

  29. Pingback ::

    Sam’s Design and Development Thoughts » CSS Layout Tips

    […] one elegant tutorial and example. High quality reference material for all of us. (Hat-tip: Eric Meyer) I agree withe the above comments, but it is a fairly complete look […]

  30. Pingback ::

    Max Design - standards based web design, development and training » Blog Archive » Some links for light reading (13/11/05)

    […] for light reading (13/11/05)

    November 13th, 2005
    Any Order Columns Meyer on Any Order Columns More Meyer on Any Order Columns An Open Letter to Di […]

  31. I”ve had a go at implementing this technique on a little voluntary site I maintain and it looks pretty good, up until I try to use a table of contents (ToC) or any other in page link.

    The problem is that once I use the ToC the top of the page is sliced off and I am unable to scroll back to the top.

    I”m not sure whether this is a flaw in my design or whether it is a bug in IE6 and FireFox 1.0.7 but it is definitely a real pain. I have also tried it in Opera 7.1 and it works fine.

    The working page can be found here,

    http://www.ousani.org.uk/ctr12.php

    and a cut down test page can be found here,

    http://www.carjen.co.uk/targettest.htm

    An interesting point is that if I use the name attribute in an anchor tag, I still have the ability to use my mouse wheel to scroll back to the top of the page but if I use id then I cannot scroll up at all.

    All advice welcome

    Cheers :o)

    Michael

Add Your Thoughts

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

if you’re satisfied with it.

Comment Preview