Absolute Columns

42 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Drew McLellan

    I have one problem though. The id names you used in your tutorial aren’t semantically meaningful.

    Of course you can use any names you wish. In an article, it’s usually better to be explicit than semantically rich. The important part is that the reader understands the example.

  2. Henaway

    Nice trick. Far simpler than most I’ve seen or used. Only big snag is the overflow:auto; … some designs will let you get away with it, others will not.

    Thought off the crazy train – would adding a min-height on the right column supply a fix there? Or I suppose more appropriately, on the left column. So even if it was a one line error message, it would still give (browsers that support min-height) the needed appearance without scroll bars?

  3. prisca

    Dan – brilliant article :-)
    I’ve been playing with this type of positioning recently, experimenting – getting confused, then getting somewhere… but always persisting. Now reading your clear description here just added fuel to my creative fire. Thanks :)

  4. David

    Great stuff, Dan! Learn something new everyday: Didn’t know you could absolutely position columns on all sides. Clever trick!

    Clients always seem to get bent out of shape when there’s more content in one column than the other. It never seemed to bother me that much.

  5. Fat Lotus

    Great tutorial, though couldn’t you solve the scrolling problem by absolutely positioning both columns? I wonder if there’s such thing as an infinite CSS loop…

  6. Nik Coughlin

    I came up with something very similar about a year ago, except allowing for differing column heights by using a seperate element for the backgrounds:

    My old 3 column equal height positioned layout

    The backgrounds are always the same height as the longest column because they are positioned against the wrapper element.

    However, your excellent article inspired me to update it slightly:

    Newer 3 column equal height positioned layout, redux via 24 ways

    The changes I took from your article were mainly cosmetic but I also changed my handling of IE6 from my homemade CSS expressions to using the IE7 js. I also changed from 100% layout to fixed-but-flexible width.

    A variation on this technique can also be used for skinning elements, ie for custom rounded boxes with alpha, drop shadows etc.:
    Using positioning technique for skinning

    You can also combine the two. I have an example of this somewhere but I can’t seem to find it at the moment :(

  7. Christopher Olberding

    Somewhat embarrassed that I had no idea that you could absolutely position on more than two sides. That tidbit was worth the price of admission.

    However I would have liked to see how to fix your example in IE6 without relying on javascript.

  8. Dan Rubin

    @Nik Coughlin: Interesting twist on the topic, thank you for sharing :)

    @Christopher Olberding: As far as I’m aware, IE6 doesn’t support absolute positioning on more than 2 sides without Javascript. It also has issues with absolute/relative positioning (which don’t always cause problems, but Dean’s JS library fixes those issues as well).

    @Josh: You’re referring to “faux columns” which I noted in the beginning of the article — I’ve used that technique many times myself, and love it, but sometimes it either isn’t practical to use a background image to create “fake” columns, or there’s another effect you may wish to create, or your design may not quite work with background images for a specific set of columns (and so on). This is an option for those times :)

    @Razvan: As Drew already replied, the intention is for the IDs to be as clear as possible within the context of the examples within this article. Any IDs or classes will work, but as with many tutorials the onus is on the reader to practice their best practices of their own accord :)

  9. Luke Dorny

    Great writeup.
    A simple technique that i’d never considered (simple, meaning simple but still not obvious). The major topic here being that using 3-sided absolute positioning is powerful, despite it’s limitations mentioned.

    Thanks for the writeup, Sñr Rubin!
    Plus, there were drinks involved!

  10. Hein Haraldson Berg

    I was thinking the ‘but wait, this only works if…’-thingy exactly where you said I’d do just that, and then you said you had a magical fix, if the right column’s content got taller than the left column’s.

    I was disappointed. I really can’t think of one single site where my customer would be satisfied with such a scroll bar fracking up his or hers design.

    What’s great though, is that I learned I can use more than two of the properties top, right, bottom and left at once. I guess the poor support in IE6 has stopped me from using it before, and so I forgot about it.

  11. Matt Radel

    Ah ha…nifty trick…I never would have thought of that. Usually faux columns work great for me, but this is a swell ace to have in the ‘ol back pocket. Thanks Dan!

  12. mort

    adding a 32kb JS file to make this technique work in IE6 seems a little heavy handed.

    While the faux column method may take more time to develop, the final product would load faster for IE6 users.

  13. Jason Robb

    Ahhhh! Dan, 3-side absolute positioned sidebar, brilliant!

    @MORT: How much would a 32KB JS file slow down your users on IE6? All things considered, passing those few seconds to a slim slice of your total traffic, instead of slowing down your development process and subsequent launch to all users, might be worth it in many cases.

    To figure out it if it’s worth it to develop for IE6, use the IE6 equation: http://24ways.org/2008/the-ie6-equation

  14. Bry

    This is cool, but the scrolling I think is a detractor. I’ve been meaning to look into the jQuery Equal Heights plug-in as a way of avoiding faux columns that I have resorted to in the past.

  15. Dan Rubin

    @Bry: Indeed, the scrolling may not work for every instance — then again, depending on the content requirements, it may not be needed at all (e.g. if the absolutely positioned column will always have less content than the primary). Javascript is also an acceptable solution, as you said.

    Something else worth noting for everyone: this isn’t intended to be a solution to the multiple column problem, as I stated in the article (we don’t yet have a perfect non-table solution that doesn’t require Javascript). Where this comes into play is less where main content columns are concerned (faux columns are a better solution in that instance), though in the context of this article it’s more difficult to show specific applications (that’s where your creativity and specific design requirements come into play).

  16. Jason Grant

    This is one of the approaches which may suit a particular circumstance.

    However, most of the time we are aiming to achieve as much as possible with as little code and maintainance overhead as possible.

    Also, still remains the issue of dreaded IE6 and the support for it (I am having to write this comment through IE6 at the moment).

    Your solution does not work in IE6 as you have described it and I am struggling to see which design template would tolerate horrible looking scroll bars on any box which has overflowing content in it (highly likely on most sites I have ever worked on).

    Nice writing style by the way.

  17. Bruce Clark

    I have to agree with some of the other comments that having to use an overflow auto is the one downfall to this method. Ideally we could use display table cell positioning to do this sort of things, however, that won’t be feasible for at least another few years.

    Hence, it’s probably best to turn to a background image on the container div that creates a pseudo column feel while floating your columns accordingly. Still, in some cases I could see a site design that works well with a scrollbar and if that’s the case than this trick is solid.

    Beautiful site by the way.

  18. Aarem

    In terms of looking to the future, it’s probably worth noting that CSS tables will probably be the best way to handle this situation (once IE8 has made its presence felt).

  19. Stuart

    Awesome! Just what I’m looking for. You wont believe what stumbling across this article has done for me in reducing my development time to get a fix for this.

    As everyone has mentioned and Dan said, it’s not ideal for all but for me in my situation it is!

    What about absolute positioning the left hand column too? Does this work or am I missing something… will give it a try now.

    Cheers,

    S.

  20. Jehzeel Laurente

    Thanks for these awesome tips! Now I’m learning… I’m really astounded of CSS can do, specially with Absolute Columns.

    I’m gonna bookmark this nifty guide for sure :)

  21. Rajveer Singh Rathore

    I will not hesitate to call it the best CSS read of the year (I know it’s late but I mean 2008 :-) ).

    It will not make any sense talking about the JavaScript issue, Rubin didn’t work for MS I suppose :-D. I know I am going to love using it under many circumstances in future.

    Thanks!

  22. Steve Firth

    Have had this bookmarked for ages and glad I finally found time to sit and read it.

    I like to think I have a good handle on css but this concept was no where to be found in my understanding.

    Great to have a different and deeper knowledge of how things work, thank you.

  23. Paul

    I didn’t realise one could use absolute positioning on opposing sides of a DIV and get away with it – great trick! Of course, the overflow:auto thing is a stinker, but I can think of a few instances where I could get away with using this solution. Thanks!

    And as others have commented: Great looking site, this!

  24. Paul O'Brien

    If you want to support IE6 without JavaScript then you can offer IE6 a greater height than you need but start it at bottom:0 and let the columns disappear through the top of the viewport (or simply hide the overflow).

    I did some examples quite a few years ago that used this method for multi equalising columns.

    http://www.pmob.co.uk/temp/equal-columns-3fluid.htm

  25. Joao

    Nice. I’ve been trying to nest divs in the left div. And float them to make a set of aligned blocks.
    That doesn’t work. My nested divs appear outside the original left div when floated. Tried unordered lists and paragraphs. It won’t float, if you know what I mean.
    The horrendous scoldbar emerges, aligning the right div sidebar to what precedes my left side floating content.

    Ah, if I could only see the light…

  26. DAVE_E

    Just come into this business, trying to be cutting edge!
    Question: Can the javascript fixes for IE6/7 be placed in a
    javascript file instead of at head of document, seems simpler,
    but don’t know how to do the link file text, crudedumbo, eh?

  27. David Reimer

    Very helpful article! And this may be a daft question, but I’ve looked everywhere without success…

    What is the license on the code in this article? Is it Creative Commons of some flavour? Inquiring minds want to know!

    Thanks. :)

  28. Christian

    Thank you for this great tutorial.

    I have a question about the left-column. In this picture http://media.24ways.org/2008/22/2008-absolute-columns-figure3.png it’s also 10px away from the left, bottom and top side of the container. Sure if you just write 0 0 0 for the right column it will pass in seamlessly.

    But how it’s achievable to also add somethin like a margin to it, so both columns are for example 10px away from the top line of the container div?

    THANK YOU IN ADVANCE

  29. Elizabeth K. Barone

    Finally — another option!

    Unfortunately, I don’t think it’s one I’d use often because of the overflow issue (I don’t like having to force users to scroll inside of the page itself). This is a great alternative for certain instances, though.

    Thanks!

  30. andrei

    hi,
    i don’t know if anyone posted this yet in the comments, didn’t have the patience to read them all.

    wouldn’t have been simpler to use both columns with position: relative and the LAST element in each column (a div maybe?) to have the property clear: both? that way, they both will stretch till the bottom of the page (next element they encounter – maybe the footer div).

    or, use javascript as follows:

    document.getElementById(“column_right”).style.height = document.getElementById(“column_left”).offsetHeight + “px”;

  31. Josh

    This is useful, I suppose. However, I think the simpler solution would have to be using a container layer, and then having a background image for the columns. That way, you can repeat it for dynamic height for both columns, but still have equal length columns due to your container layer’s height taking precedent in all cases. As @Henaway said, having a scrollbar in your sidebar doesn’t always work (although I would argue that it never really does).

    Just my two cents. :) Great writeup, though! Thanks for taking the time out to do it!

  32. Razvan

    Great article Dan. really enjoyed it and I think it’s probably among the best of the articles posted this year.
    I have one problem though. The id names you used in your tutorial aren’t semantically meaningful.
    Don’t get me wrong, that doesn’t make it wrong but it would be better to have more meaningful names since it’s something that probably many will take after.

  33. Michael Angrave

    Firstly, Love the design of this site. Nice to see people thinking outside the box.

    This looks nice. Looking forward to having a play around with it. I’m always grateful for much needed CSS expertise. I’ll let you know how I get on.

    Post more like this, thanks.

  34. kelly

    I know this article is over a year old, but I could not get the right column to work in FireFox 3.5, which is the newest firefox. It worked perfectly in IE8. And we can only hope IE 6 will go away!! as more people upgrade.

    None the less, you helped many people by pointing our how to use ‘Relative’ positioning to create a new point of reference for the absolutely positioned div. CSS Positioning can be tough to understand at first.

    I will try out a few things and see what I can come up with. Usually firefox is not this picky.

Impress us

Be friendly / use Textile