Valid solution to the CSS equal height columns problem?

March 15, 2009 7:23 PM

Is this a good way to solve the equal height columns problem in CSS?

I was trying to solve the problem of how to get background colours to fill the full column heights in a three-column layout, as the shorter columns only extend far enough to cover their contents and so don't line up. Being a relative beginner at all this, I looked both in my web-design book and on the internet for how to go about it - and most advice seemed to be either for the faux-columns way, using repeated images, or the huge padding/negative margin overflow way, neither of which seemed ideal. Or other hacks of similar complexity.

But then I thought of using two extra divs - one around the left and central columns, with the central column's own background-color set and the left column relying on the background-color of the extra div to show through its transparency, becoming its background. The containing div naturally extends to the height of the longest column, and so too does the background colour. Same with the larger div, taking care of the background colour of the right column. (brief outline of the HTML structure at Pastebin here)

And with all the divs floated to the left (except possibly the centrecolumn floated to the right), that seems to have solved the problem. But while there have been many solutions suggested on the internet, I don't seem to see this one around - it seems to work really well with most browsers (although it took a little more work with IE6), and I got it to work for the website I'm building in both fixed and liquid layouts. (I used the #wrapper as the #rightcolumnbackground there, which meant I really only had to add one div.)

Are there cons to this I'm not seeing? Or are the book and all the articles I read on this just out of date? What's the easiest way to solve the problem right now?

posted by dolca to computers & internet (32 comments total)

Why not use tables?
posted by jeb at 7:50 PM on March 15

The term of art here is "clearfix" -- essentially tricking the browser into letting the floated element inherit the height of its parent.

There's a number of ways to get this to work -- this SitePoint article does a good job rounding 'em up -- but by far the easiest is to just throw an overflow: auto; onto the parent element (the one containing the float.
posted by jacobian at 8:04 PM on March 15

are you sure you're using the min-heights and clearing properly? have you tried using images that trick the eye into the column colors you desire?

I won't get into a tables vs divs war but if I were to answer to @jeb I'd say "because it's not tabular data"
posted by crustix at 8:05 PM on March 15

Will your solution work if the left column is naturally "taller" (i.e. has more content) than the central column? Vice-versa?

Seconding jeb's question - what's keeping you from using tables here? I can imagine a couple of reasons, but what's yours?
posted by amtho at 8:16 PM on March 15

I'm not using tables I guess because it's not a table. The divs in my "hack" or whatever it is still each obviously means something - which is closest to the point of CSS as I understand it. But yeah, no sense getting into tables vs divs, as tables are obviously easier for some things like this, and we all different opinions on whether it's worthh it.

amtho, it works if the left column is the tallest - or whichever one really.

crustix: I'm not sure what you're asking me? There's no need for clearing, and min-heights don't work because the point of the problem is that you have to take into account the height of the tallest bar not being easily predictable or pre-determined. And as for the images, that's what I'm puzzled by when I see the solutions proposing using repeating images - why use images when you can just use background-color?
posted by dolca at 8:32 PM on March 15 [1 favorite has favorites]

jacobian: thanks for the links - skimming through them I don't really see how they're related to this problem, but I'll read them more carefully later.

I get the impression that I'm not explaining myself very well - Here's hopefully a better explanation of the problem. Here's the page I was playing around with while learning, which hopefully shows what I mean. (Please bear in mind I'm just a beginner.) Here's the same page in liquid/fluid layout. (I think.) It looks to be working okay to me?
posted by dolca at 8:40 PM on March 15

Ah this one is fun, and the solution is elegant

First, wrap all the columns you're interested in displaying in a div, say #overload, and have #overloard repeat a background with all three columns in it, say repeat-x 50% 0

Then position the columns properly within #overlord and each column has a full height background when some sort of clear/clearfix is applied to #overlord
posted by zentrification at 9:07 PM on March 15

I downloaded the liquid version and tried moving the first section of the middle column to the left column, so that the left column would have more text/be longer. When I did that, the middle column was yellow behind the remaining text, but gray below that (Firefox 2.0, fwiw). Is that your intent?

here's my alteration
posted by amtho at 9:09 PM on March 15

amtho: Is this what you mean?
posted by dolca at 9:19 PM on March 15

But then I thought of using two extra divs - one around the left and central columns, with the central column's own background-color set and the left column relying on the background-color of the extra div to show through its transparency

The divs in my "hack" or whatever it is still each obviously means something

What do those extra divs mean? It seems like they are a bunch of hoops to jump through to get the browser to do what you want. Have you actually tested your new solution vs. tables on a screen reader? So far, the Semantic Web is bs-- nothing can use it. I also think the idea is fundamentally flawed, but as alluded to above, thats a longer conversation. Anyway, keeping things to the scope of this conversation (ie, not calling in to the argument your belief that keeping this 'meaningful' is a valid and achievable goal), I call BS on the idea that this hack is even more semantically valid than just tabling it. I'm sorry to bring it up this way, but I'm starting to feel like this WaSP stuff is like...the nerd equivalent of making elevators that stop on every floor for shabbos. Couldn't you be using this brainpower to build like awesome badass features?
posted by jeb at 9:23 PM on March 15

dolca: not really. What if "content" is shorter than "leftbar"? It could happen. I have worked on web sites where the navigation gets really long as the site grows, but some pages (e.g. a contact info page) only have a little content.
posted by amtho at 9:33 PM on March 15

amtho - I understand why the page you altered looks broken - if you can see how that #leftbarbackgrounddiv works, it in effect hides behind one column while showing from behind another, acting as that column's background colour. To make your changes work, I just have to change the colour of that background div to yellow, the longest column's background to greyblue and delete the background-color from the yellow central column's css, and it should work again.
posted by dolca at 9:34 PM on March 15

I do like your colors, by the way :)
posted by amtho at 9:34 PM on March 15 [1 favorite has favorites]

Yes, I think I see the overall div scheme. However, if you make the changes you describe, then the layout only works if the longest column is not the background div color. The layout won't work both ways; you have to pre-determine which column is longer.

If this design is a template used by a CMS, you wouldn't get to change the layout on a case-by-case basis. Or am I misunderstanding?
posted by amtho at 9:38 PM on March 15

zentrification: wouldn't that force all the columns to have the same colour?

jeb: I wish I could explain to you how it just makes sense to me - and that it has, when it works, an incredible elegance that I felt when I first learnt about OOP with C++. All the problems and need for hacks are problems with implementation - the people behind the standards and the browsers. That does not mean the central idea behind it isn't sound. Not being the most eloquent person in the world, I'll just recommend you google this - I'm sure many eloquent people have written sound arguments for the Semantic Web.

I do agree with you that some hacks jump through so many unsemantic hoops just to stick to CSS that they seem pointless - I don't think mine is one of them. In my idea, every div refers to an object - a header, a footer, a column. The "hack" part of it is just a div called #leftbarbackgrounddiv - thinking about it now, the 'div' part was unnecessary, but that's exactly what it is: the background for the leftbar. I want to do anything to it, I know exactly where to go. (There should've been a #rightbarbackground too, but I was a little lazy there and realised I could just use the #wrapper on this occasion.)

But I'm really not the best spokesperson or representative of CSS y'know - I'm just a beginner. Hopefully someone else much more knowledgeable can come in and answer your question. All I know is that it makes a lot of sense to me.
posted by dolca at 9:51 PM on March 15

That's a good point amtho, and I think may be a flaw - that's what I posed the question for. Let me think on that one :) And thanks for the compliment on the colours - I don't like the blue-grey so much, but my friend likes it - I just used it to show you can have two sidebars of different colours.
posted by dolca at 9:55 PM on March 15

I think that IS a limitation/flaw in my idea amtho - though I think for times when we know which column is going to be the longest, it still would be very useful, as it allows variable width, liquid layout, has no need for images, and doesn't break with newer browsers (as far as I know!) Do you see any other problems with it?
posted by dolca at 10:26 PM on March 15

If you're ok with doing a some hacky stuff to take care of IE6 and IE7, you can use display: table on your divs and everyone goes home happy.

Except the 70% of people who use IE6 and IE7.
posted by the jam at 10:54 PM on March 15

dolca: that is what is so elegant about the technique, as the #overlord div encompasses the three smaller divs, you make the background of #overload the three columns, and then repeat-x on the background, creating all three backgrounds in #overload.

then the columns are positioned over their correct background, and column content length does not matter.

simple example of this technique
posted by zentrification at 12:01 AM on March 16

zentrification: as far as I can tell, that won't work with layouts where the table columns aren't a fixed width, will it?
posted by amtho at 4:27 AM on March 16

dolca: I'm sorry to be so negative here, but absolutely knowing which column will be longest may not be that common. The real world, it so often puts a crimp in our more elegant solutions.

But, yes, the basic concept seems OK.
posted by amtho at 4:30 AM on March 16

zentrification: I think I understand your idea (isn't it the faux columns one?), and yeah, doesn't that only work with fixed-width columns?

amtho: You're not being negative at all - it's the help I was looking for. But don't we often know which column will be longest? I mean, in the 3-column layout where two columns are support information and one is where most of the content is - isn't that a very common use of the 3-column?

But I get what you're saying though - much like zentrification's solution, it only works under certain conditions.
posted by dolca at 11:32 AM on March 16

I found this - haven't had time to try it yet, but looks like it should work even if you don't know which column is going to be the tallest?
posted by dolca at 12:04 PM on March 16

It works! I tried Matthew James Taylor's solution on my page here, and it seems to work great - it doesn't matter now how tall any of the columns are or extend to. No images, no javascript, and should work in all the common browsers. It took the concept behind my idea much further - takes a little more maths, so if you know which column is tallest, my idea could still be more convenient - but if you don't, this pretty much solves it I think! What do people think? Any problems I'm not seeing?
posted by dolca at 1:41 PM on March 16

Hey dolca, if you're still checking this thread -- I don't know what browser you're using, but it doesn't seem quite right in Firefox 2.0 (I know a lot of people are using 3 now, but you might want to check both).

Good luck!
posted by amtho at 5:44 PM on March 16

Hey amtho - what do you mean by it doesn't seem quite right? Which part of it is broken? Which version - the one where I used Matthew James Taylor's solution?
posted by dolca at 7:01 PM on March 16

Here's a GIF of my browser's view. The problems stay at any browser size, it seems. You can see that some of the text isn't showing.

This is from your link here.
posted by amtho at 4:39 AM on March 17

Thanks amtho - it's broken in Camino too, but works fine in Firefox 3, Safari 3 and Opera 9. Matthew James Taylor's page says it's well-tested, so maybe I've missed something - the theory behind it sure makes sense. Guess this is the point in my web design education where I get used to the painstaking process of testing a page in every browser...
posted by dolca at 6:17 AM on March 17

Yeah, I even test in Netscape 3 and some old browsers that only run on Mac OS9. Also, it's really hard to test in older versions of IE (since you can only have one version installed at a time), but it's important.
posted by amtho at 6:22 AM on March 17

Really? Wow - wouldn't you draw a line at some point, and say people need to update their browsers?

Matthew James Taylor's own simple demonstration of his solution actually works fine in my Camino, and I'm guessing would work in your Firefox 2 also. I'm guessing I got something wrong on my page, but when I spent a little time working on it earlier I couldn't find it - commenting out a bunch of stuff, I seemed to have isolated it down to the fact that Camino was completely ignoring the instructions to pull the columns back to the right. Not sure what to do about that - but I'll work on it some more. My original solution seems to work fine - but like you said, only when you know which column's the tallest...
posted by dolca at 5:11 PM on March 17

If my code works in these browsers, I know it's _solid_ and will work anywhere. I don't always achieve perfection, but my sites are at least readable -- no text cut off or missing -- in all browsers (I hope).

I don't try to control users or tell them what to do. I can't anyway, and I don't like the idea of making a bunch of perfectly-functioning old computers, which can't run newer software, obsolete when some school system in rural Georgia, or urban Atlanta, or even someplace in Africa or Asia could be using them. I also don't like the idea of forcing old computers into landfills any more than absolutely necessary.

There are a minority of web developers who go to this much trouble, but I feel pretty strongly about it.
posted by amtho at 12:30 PM on March 19

I admire that amtho, and it's certainly a good idea to make sure at least the text or the main content is all visible and readable to as many people as possible even when the fancy layouts break down. Graceful degradation is good as much as possible, and I will learn more about ways to go about it and to put it to use in my designs as much as I can - but surely even you must draw the line somewhere, unless you make text-only webpages. There must come a point when trying to be backwards compatible holds back forward progress, or takes up time that could be better spent making the page or site better in other ways. It's certainly worthwhile to make sure there's always a basic version of the page that older browsers can fall back to - and I hope to learn and practise that more soon.

For anyone who's still reading this, I believe I've made both my idea (fixed, fluid) and Matthew James Taylor's idea (fluid) work on my test page in most recent/common browsers (back to IE 5). It is strange to me - although admittedly I haven't trawled through pages and pages of Google results - that these solutions haven't had more attention, as this problem must come up in web design all the time. My solution is relatively simple and I can't have been the first one to think of it - in fact I think I came across one page that used the idea in a Wordpress theme - but Taylor's idea seems to truly solve the problem, and I'm surprised it doesn't seem to have received more attention (despite his seemingly having mentioned it in the comments to every entry on the web about this issue) - googling for the problem still turns up much less satisfactory solutions, some of which have been mentioned in this thread. I hope I haven't missed anything in checking my pages with different browsers, but if I have that's likely to be my mistake rather than a problem with the concepts - the ideas are sound, and since this page is now on page 3 in the Google results, I hope it can help others having this problem. When you're certain of which column's going to be tallest, my layout is much simpler and more convenient - when you don't know in advance, Taylor's idea solves it, albeit with a few more calculations. As far as I can see - and I'd love it if anyone sees any other problems with them if they could please let me know, but I'm reasonably satisfied right now that they work in all major browsers) - they are the best solutions to the problem.

And just in case anyone spots that a left section of the background behind the 3-columns gets lost in IE 5 on my test page, that is not a part of the 3-columns layout - just something I've added to my page, and I believe it looks that way in IE 5 because of an IE bug with margin: auto centering - so, a separate problem entirely. It doesn't affect the 3-columns in any way, and there's probably some easy way around it, but for my purpose I'm happy to leave it that way for now as it doesn't break the essential parts of the layout or affect the 3 columns at all. The 3-column ideas themselves work fine.
posted by dolca at 12:07 PM on March 22