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.

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.

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.

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

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!

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?

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

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.

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…

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 :(

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.

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

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

Great article.
This site has really dug up some seriously quality content this festive season.

(Thanks Sam, I’ve fixed the typo you noted!)

Thank you Mr Rubin, for sharing this!
Three side absolute positioning: never heard before!

@Mort: That’s definitely fair, and it ultimately depends on what level of support you have to (or want to) provide to IE6 users. For more on that discussion, see Jeremy Keith’s The IE6 Equation.

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

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.

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.

That’s a great method. “Javascript is also an acceptable solution” but sometimes is not the best solution.
Thanks a lot

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

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.

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

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!

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.

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!

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…

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?

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

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

there is a better way to do this with floats

Great going to have a go at this, Hope this works ok with IE6 though.

Yup, for sure this will be going in our CSS course. Thanks!

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”;