meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Layout Revolution

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’.

31 Responses»

    • #1
    • Comment
    • Wed 2 Nov 2005
    • 0210
    Lachlan Hunt wrote in to say...

    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
    • Comment
    • Wed 2 Nov 2005
    • 0226
    Hmm? wrote in to say...

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

    • #3
    • Comment
    • Wed 2 Nov 2005
    • 0229
    Lachlan Hunt wrote in to say...

    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
    • Comment
    • Wed 2 Nov 2005
    • 0303
    Philippe wrote in to say...

    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
    • Comment
    • Wed 2 Nov 2005
    • 0725
    Ronald wrote in to say...

    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
    • Comment
    • Wed 2 Nov 2005
    • 1043
    Lauchlin MacGregor wrote in to say...

    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
    • Comment
    • Wed 2 Nov 2005
    • 1112
    Peter Foti wrote in to say...

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

    • #8
    • Comment
    • Wed 2 Nov 2005
    • 1146
    Pete Rossetti wrote in to say...

    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
    • Comment
    • Wed 2 Nov 2005
    • 1158
    Peter Foti wrote in to say...

    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
    • Comment
    • Wed 2 Nov 2005
    • 1208
    Martijn ten Napel wrote in to say...

    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
    • Comment
    • Wed 2 Nov 2005
    • 1350
    Patrick Haney wrote in to say...

    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
    • Comment
    • Wed 2 Nov 2005
    • 1408
    Peter Foti wrote in to say...

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

    • #13
    • Comment
    • Wed 2 Nov 2005
    • 1432
    Brian LePore wrote in to say...

    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
    • Comment
    • Wed 2 Nov 2005
    • 1607
    Hans Melis wrote in to say...

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

    • #15
    • Comment
    • Wed 2 Nov 2005
    • 1615
    imran wrote in to say...

    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
    • Wed 2 Nov 2005
    • 1700
    Received from 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
    • Comment
    • Wed 2 Nov 2005
    • 1932
    Philippe wrote in to say...

    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
    • Comment
    • Thu 3 Nov 2005
    • 0308
    Tristan wrote in to say...

    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
    • Comment
    • Thu 3 Nov 2005
    • 2216
    Thomas M. wrote in to say...

    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
    • Comment
    • Fri 4 Nov 2005
    • 0847
    Ed Mullin wrote in to say...

    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
    • Comment
    • Fri 4 Nov 2005
    • 1813
    Jeff Wilkinson wrote in to say...

    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
    • Comment
    • Sat 5 Nov 2005
    • 0820
    Jeff wrote in to say...

    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
    • Tue 8 Nov 2005
    • 2012
    Received from 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
    • Comment
    • Wed 9 Nov 2005
    • 0042
    Frank Henninger wrote in to say...

    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
    • Comment
    • Wed 9 Nov 2005
    • 0924
    Small Paul wrote in to say...

    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
    • Comment
    • Thu 10 Nov 2005
    • 1857
    Bill Williams wrote in to say...

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

    • #27
    • Pingback
    • Sun 13 Nov 2005
    • 0820
    Received from 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
    • Comment
    • Thu 17 Nov 2005
    • 1429
    Bram wrote in to say...

    Fantastic, thank you for sharing

    • #29
    • Pingback
    • Wed 14 Dec 2005
    • 1112
    Received from 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
    • Sun 1 Jan 2006
    • 1616
    Received from 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
    • Comment
    • Fri 13 Jan 2006
    • 2006
    Michael Hickland wrote in to say...

    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

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


November 2005
SMTWTFS
October December
 12345
6789101112
13141516171819
20212223242526
27282930  

Sidestep

Feeds

Extras