Multi-Unit Any-Order Columns

Published 19 years, 1 month past

During last week’s workshop in Chicago, I was asked to discuss Alex Robinson’s One True Layout.  This presented a bit of a challenge, since the article and its contents are rather new.  While I’ve read through it all and grasped the main points, I wasn’t entirely sure I grasped the nuances.  For that matter, I’m still not entirely certain that I do.  And I tend to be wary of speaking about things I don’t fully understand.  Still, the audience was interested, so I took the plunge, figuring that I could stick to the bits I knew relatively well.

The Any Order Columns seem straightforward enough, once you get that it’s using margins to shift elements around.  The Equal Height Columns aren’t really, perhaps more properly being called “Extremely Tall But Clipped Columns”, but they simulate the job well enough to count.  And then there is the case of Vertical Grids, which I’m still pondering.

But as an illustration of why I say I’m not sure I grasp all the nuances, it was literally while presenting on this topic during the workshop that I hit on an extension of Any Order Columns (AOC) that allows for AOC to be used with columns of mixed width measures.  It came in response to a question about that very thing.  I’d been showing how to do AOC with columns sized with consistent units, like all with percentage widths or all with pixel widths.  But, an attendee asked, what if you wanted to have one column with an em width and another with percentages?

Say, for example, you wanted the first and second blocks (to use the terminology from Alex’s examples) to be the center and right columns, respectively, and the third block as the leftmost column.  Furthermore, suppose you want the left column to be 10em wide, the center column 40em wide with 1em ‘gutters’, and the right column to be 200 pixels wide.  I’m using pixels because it’s a commonly-used unit, but if it makes you feel better, assume there are Flickr images there or something similar in that column.

All right.  So we have to move the third block leftwards by 40em of center width, 2em of gutters, 10em of the space it will occupy, and 200 pixels of the rightmost column—the second block.  That’s 52em + 200px, which is exactly the sort of thing CSS doesn’t allow for a variety of reasons, some more reasonable than others.  IE/Win allows expressions, but only with a proprietary value syntax that nobody else supports.  And it potentially could be done with JavaScript, which would require pulling some font-size information in order to compute various em widths.

Or… we could relatively position a float, using the float’s margin to handle one of the measures, and the relative positioning to handle the other.  So you start like this: 

#block3 {float: left; margin-left: -200px;}

That will get the third block to sit right on top of the second.  That’s taken care of the 200 pixels, but what about getting it the rest of the way?  Add the following: 

#block3 {float: left; margin-left: -200px;
  position: relative; left: -52em;}

This puts the third block right where we want it.

There’s one exception: IE5/Mac, which doesn’t pay attention to the relative positioning when the element’s been floated.  So far as I’ve been able to discern, this is the one reduction of browser support from Alex’s original AOC.

With a little bit of math, you can make this work so long as the elements to the left of the shifted column use no more than three different units in their sizing.  To handle two types of units, you could do something like this: 

#block1, #block2, #block3 {float: left;}
#block1 {width: 35em; padding: 0 20px; margin-left: 9em;}
#block2 {width: 12em; padding: 0 15px 1em 5px;}
#block3 {width: 8em; padding: 0 0.5em;
   margin-left: -60px; position: relative; left: -56em;}

(code example with browser workarounds)

This approach would permit the ability to drop in pixel-sized decorations, like separators or drop shadows or whatever, while preserving em-width column contents in order to scale with font sizes.

Now suppose you have a mixture of all three unit types, which is a case I didn’t tackle in the workshop.  I might even have said it wasn’t possible to handle, but if I did say that, I was wrong.  With the addition of a negative right margin on the second column, we can handle all three units, as seen here: 

#block1, #block2, #block3 {float: left;}
#block1 {width: 50%; margin-left: 11em; margin-right: 1em;}
#block2 {width: 200px; margin-right: -200px;}
#block3 {width: 10em; margin-left: -50%;
  position: relative; left: -12em;}

(code example with browser workarounds)

Note that I’m not saying that you’d necessarily want to mix fixed-width columns with fluid-width columns.  Doing so is a potentially volatile mix when using CSS-driven design, and this technique doesn’t make it any more or less volatile.  If you want to do it, though, this is a powerful approach.

In the examples to which I pointed, I came across some intermittent appearances of the double-margin float bug in IE5.5/Win, though oddly not in IE6/Win.  I didn’t try to work around these inconsistencies beyond using the display: inline hack from Alex’s original examples, but I’m sure they’re surmountable.  It’s probably as good a case as any for using conditional comments to serve up fixes to pre-IE6 versions of IE/Win.

You may have noticed that, if the browser window is reduced in width, the columns start dropping in the two-unit example.  That’s something that could likely be handled with a sufficiently wide container, although doing that risks the dread horizontal scrollbar.  You’d get the same scrollbar with either older CSS layout approaches or with table-driven design, though.

I suspect there are even more combinations and nuances to be found in the AOC technique, and still more in the column and grid ideas Alex has laid out.  Hopefully I’ve made a good start here.  For any omissions or inaccuracies there may have been in my Chicago presentation, I hope the attendees and organizers will accept my apologies.

Comments (40)

  1. My head is still spinning from reading Alex’s article a little bit ago. Now I have the overwhelming urge to ditch my work for the day and play. Darn you, Eric ;-)

  2. BTW – when I emlarge the text one step in your 1st example, block 3 (the leftmost column) disappears entirely. I am in FF 1.0.7 on WinXP.

  3. The examples seem to work fine in IE v6.0 but in Netscape 7.1 the columns and text are missing/don’t display.

    Unfortunately, these are the only browser tools I have at my disposal here at work. (and -please don’t tell- I’m using Netscape unauthorized! egads!)

    Anyway, here’s the specs for the browsers from their respective “about” boxes.

    IE: 6.0.2800.1106; SP1

    NN: Netscape 7.1; Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.4) Gecko/20030624 Netscape/7.1 (ax)

    Hope this helps.

  4. The problem with your second example is that if the viewport or container element is too wide, you get large gutter of white space. If it’s too narrow, it overflows off the right of the viewport and, because of the overflow: hidden;, you don’t even get a horizontal scrollbar.

    With mixed units, I prefer to have the 3rd column take up any remaining space and let the other two columns be in any unit. I wrote an any order columns with mixed units example using 25% left column, 10em right column and fluid center that takes up the remaining space. Plus, it works in all browsers I’ve tested in with the only hack being display: inline; to fix any possible double-margin float bugs in IE. But that’s really only there for safety, this particular example works fine without it.

  5. I don’t think you owe any apologies for being put on the spot about a topic which you didn’t expect. Still though, thanks for explaining it for all the rest of us! I’m wondering, how much weight are the A-List’ers still giving IE-Mac? I know on Slidesh0w, there was speculation awhile ago that maybe it’s time to start phasing out support for it. I’m curious to hear your thoughts.

  6. This has been driving me nuts, but I’ve narrowed it down to this bit of CSS: #main {background: white; width: 100%; overflow: hidden; postition: relative;}.

    Changing postion to absolute shows the text, but messes with the footer. Changing overflow to visible shows the text but the footer is positioned weirdly. setting the overflow to ‘scroll’ puts everything where it should but then you have scroll bars you don’t need.

    I keep trying.

  7. Well, in FF 1.06 on Win2KProSP4, I lose both columns in the first example after 2 enlargements.

    I’ve tabled delving into this because it requires too many hacks to create, and my agency would rarely design something as complicated as what Alex dished out last month. I have enough stress in my life to be keeping track of a zillion hacks for how many different browsers just so I can make an uber-complex site that no client of mine is going to request. I don’t know, maybe next week.

    There are, however, some neat techniques in there that I have flirted with for the last two years, and it’s nice to get a little validation for it, even if it is private.

    Lastly, I just created a web site for a scholastic concern, and I had to support *every* Mac browser, OS 9x and up: Safari 1.2+, Netscape 6+, Firefox 1.0+ and Deer Park, Camino 0.8.4, Opera 6+, and IE/Mac 5; relative positioning with suckerfish, flash, valid xhtml 1.0 strict. It even works in Linux (Konqueror), I’m told. Sure kept me on my toes… ;-)

  8. Hey, I didn’t realize my question at the workshop would generate a whole blog entry and all the research! I’m still trying to wrap my brain around some of this, but your presentation helped me further my understanding. Thank you, Eric. Hope I wasn’t too pestering.

  9. There”s one exception: IE5/Mac, which doesn”t pay attention to the relative positioning when the element”s been floated. So far as I”ve been able to discern, this is the one reduction of browser support from Alex”s original AOC.

    How many people actually use IE5/Mac nowadays? It isn’t even available on new systems. Would it be premature to say supporting IE5/Mac isn’t necessary anymore?

  10. One of the main problems with your examples is the use of overflow:hidden in order to contain the floats in #main. When the content is too large to fit [1], it simply disappears, due to the overflow settings. A much better way in this case would be to use display:table to contain your floats.

    [1] in case the user need to zoom in seriously (very obvious with your em-based width examples, or in case any of the blocks contain larger content blocks: data-tables or large(r) images.

  11. Wouldn’t it be nice (as a Beach Boy might say) to finally have real, working solutions for all of these layouts? I think someone should collect all of Alex and Erics work on these layouts and create a little crib-sheet PDF that we can keep on our desks… Kudos to both.

    As an aside, isn’t it amazing that the web is a-buzz with talk of “Web 2.0” and yet in reality, we’re still struggling make even relatively straight-forward page layouts using the industry standard web styling language, CSS?

  12. I myself since the Chicago workshop have been trying to get both Alex’s Any Order Columnas and Full height columns to work but not with a lot of sucess. I can get the full-height pice to work but the any order columns is a bit frustrating. I’m also going to take a look at Lachlan’s AOC example.

    Eric rocked the house in Chicago, although I would love to have gotten a chance to see him do a live makeover or two, but then time being what it was there just wasn’t enough of it to g around.

    But, as an ealrierrespondent said, “Damn you, now I want top ditch work and play all day.” Its off to re-read this thread and break out my working examples…

  13. A quick response to those of you asking if it’s time to drop IE5/Mac:

    http://meyerweb.com/eric/thoughts/2004/12/20/market-share-dont-care/

  14. Eric rocked the house in Chicago, although I would love to have gotten a chance to see him do a live makeover or two, but then time being what it was there just wasn”t enough of it to g[o] around.

    Your rent was up at 5!

  15. Eric, you’re a CSS God. Your outside-the-box thinking always amazes me. I’d love to sit in at one of your lectures/presentations (are they even public?). Is there a way to track you and see when you’ll be in what venue? I live in Illinois, but work in St. Louis.

  16. Pingback ::

    torresburriel.com » Lecturas sobre hojas de estilo y est

    […] navegador de moda. Any Order Columns Meyer on Any Order Columns Layout Revolution Multi-Unit Any-Order Columns An Open Letter to Disney Store UK S […]

  17. Pingback ::

    UGgallery » Архив журнала » Универсальный xhtml-шаблон

    […] сетки”. Вот пример использования шаблона. PS: Multi-Unit Any-Order Columns Эрика Меера. […]

  18. Pingback ::

    Reyner Sibaja » Buenos artículos

    […] ndares y usabilidad. Proyecto Camaleón Porque diseñar con tablas es estupido Multi-unit Any-order columns El conocimiento se contrata y se paga Web […]

  19. Pingback ::

    One Layout to rule them all at RAMsey

    […] ain fully around Alex Robinson’s One True Layout and I have good company. Eric Meyer said he hasn’t quite “grasped the main points.” Need […]

  20. Ugh, how promising equal column heights seemed, in theory, how discouraging in practice: Are equal height columns for real?

  21. Pingback ::

    Philadelphia Standards Organization » Blog Archive » Eric Meyer on the One True Layout

    […] , the margins of its neighbors, and the left property on relatively-positioned columns. He blogged about it as well. It won’t work if you’re juggling […]

  22. Pingback ::

    Vorsprung durch Webstandards | Jäger des verlorenen Schatzes

    […] Die Holy-Grail-Methode steht sicher on the “Shoulders of Giants” wie etwa Eric Meyers Multi-Unit-Any-Order Colu […]

  23. Pingback ::

    Steve’s Log » Blog Archive » In Search of the Holy Grail - CSS Layout

    […] dding difficult without a further layer of divs within each column. Another lead came from Eric Meyer”s adaptation that uses positioning to mix multiple unit t […]

  24. Pingback ::

    21st Blog » Blog Archive » vbnvbnvbn

    […] Another lead came from Eric Meyer’s adaptation that uses positioning to mix multiple unit types. His example also yields a three-column layout with fixed sidebars and a liquid center. Unfortunately, it relies on approximate percentages and fills a portion of the viewport that varies widely with different screen resolutions. […]

  25. Hi Guys,

    wow, what a great read this has been for me, i am a GUI designer and have been in the industry for some 7 years now and throught that time, i have learnt more and more about clean code, design and layout. The teachings i have got have always come from talking and reading articles such as this one.

    I would like to thank all the guys who have contributed to this article and its subsequent comments, guys thanks a million and please keep up the good work. Sharing our knowledge is the one sure fire way that we can help one another create better sites and layouts.

    i look forward to the next article.

  26. Pingback ::

    fireyy blog » Blog Archive » [译]Understanding “Any order columns”

    […] Multi-unit any order columns […]

  27. enjoying the read.
    any suggestions for things to read to better understand what is being discussed here?
    thanks.

  28. Pingback ::

    css 英文相关文章以及站点 - 第8音 Design Everying

    […] Multi-Unit Any-Order Columns […]

  29. Pingback ::

    SourceLOG » Blog Archive » In search of the One True Layout

    […] Meyer had a brainwave in the middle of a workshop and came up with Multi-Unit Any-Order Columns which does exactly what it says on the […]

  30. Pingback ::

    Design For Masters » В поисках Святого Грааля

    […] были сделаны выводы из статьи Эрика Майера Adaptation который использовал различные типы единиц измерения. […]

  31. Pingback ::

    Media Queries and CSS3 Experiments -- Varying Columns :: Unintentionally Blank

    […] I stole Eric Meyer’s example of Any-Order Columns, changed the sizes up to pixels to make everything easy (center column 500px wide and columns 2 and […]

  32. Hi Eric, I have managed to solve the equal-height-columns issue without chopping off very tall columns. I have versions using ems, Pixels and percent and they have no CSS hacks. I would love it if you could have a look and let me know what you think:

    3 column liquid layout in pixels

    3 column liquid layout in ems

    3 column liquid layout in percentages

  33. Pingback ::

    [译]Understanding "Any order columns" - ifireyy

    […] order columns Multi-unit any order columns Equal height columns In Search of the Holy Grail Tagged: css Feed for this […]

  34. Pingback ::

    Tagging the Web Daily 07/25/2008 « PAB Skunkworks Weblog

    […] Eric’s Archived Thoughts: Multi-Unit Any-Order Columns […]

  35. Pingback ::

    Freshleaf Blog » On wide monitors, liquid layouts and line lengths... - corporate website design

    […] columns and a central column that scales to fill the remaining available width. When even CSS guru Eric Meyer has a proposed solution, you know its a movement with some traction.It would be somewhat […]

  36. Generate a multi-column css layout isn’t so hard. Try these tools,
    3 column layout generator
    2 column layout generator
    4 column layout generator
    There will be a 5 column layout generator. But I see no need to have a 6 column layout generator coz there’re fewer results about it in google search.

  37. Pingback ::

    渐进增强式布局探讨（上） - 岁月如歌

    […] Eric的Any-Order Columns, 对于固定宽度的三栏布局，Eric的方案非常优秀。 […]

  38. Pingback ::

    渐进增强式布局探讨（下） - 岁月如歌

    […] 前些日子主要精力都放在了阅读ALA上的文章，没怎么注意其它信息。昨天才仔细阅读Eric的Any-Order Columns和Alex的One True Layout, 发现这种思路和想法早就有人尝试过了。比如Eric原文中的例子是定宽的，但稍微修改，就可以演化为双飞翼布局。Alex的One True Layout, 给的例子被墙了，就一直没细看，今天才找代理过去瞄了一眼，一瞄不要紧，原来One True Layout就是双飞翼，不过Alex只用到了浮动和负边距，因此没有提及main – sub – extra这种排列的实现。 […]

  39. Pingback ::

    outbreak » Fluid searchbox (written on October 4th, 2009 by Marko Mrdjenovic)

    […] fix some stuff in some browsers so everything aligns nice. The techinque used is derived from the multi-unit any-order column layout by Eric Meyer as it opens your mind on how to use multiple units in a single layout without fuss. […]

  40. Pingback ::

    CSS Info Sites Links List « Digital Media Arts

    […] Multi-Unit Any-Order Columns […]

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