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?

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.

@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 :)

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.

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.

@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

@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).

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

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.

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!

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.

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.

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?

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?

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.

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

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!

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.

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.