When you start implementing the layout of a website using CSS and HTML DIVs, you will inevitably come across the following problem:
How do I force two columns to be of the same height?
You want to get something like this:
But whatever you do, you are not able to extend the sidebar till the footer. You end up with something like this:
Many have suggested using some tricky CSS techniques to get around the problem, while in fact none of the techniques work perfectly in all cases. It is tedious to make these methods work in many situations.
Some have suggested techniques such as tiling a background image to give a false impression of long columns. This technique is called faux columns. This hack almost works, but you know – it is a dirty hack too.
People always despise using a JavaScript based solution for this problem. I don’t know why, but let me tell you the truth – a JavaScript based solution for this problem is not worse than any other solution. In fact if you are using JavaScript, you may save a few hours of frustration of trying to get things working. People will warn you against this by saying “What will happen if the user turned off JavaScript?“. Believe me, if the user has turned off JavaScript, most of the web is broken for him anyway. Your sidebar does not matter to him. Don’t pretend like it does.
Here is how you can get around the problem using JQuery:
Put something like this in your ready event handler:
$(".sidebar").height(Math.max($(".content").height(), $(".sidebar").height()));
That’s it. Now start getting things done instead of tinkering with all these small details; and quit trying to use CSS to to solve every crazy problem.
I agree with you completely. People focus too much on the doing it the right way instead of doing it the ok way that will not take a week. To them I say Stop worrying, start doing!
Does this work as-is, or do you have to add a bit of code to handle window resizing, font resizing, the case where the text in “content” is smaller than the text in “sidebar”, etc.?
Oops, forgot another point: I’ve used that kind of technique, but without JQuery, and I’ve had an issue: while I’m resizing Firefox’s window, Javascript doesn’t receive “resize” events, so the layout is messed up. Once you’ve finished resizing the window, it works, though.
IIRC IE doesn’t have this bug.
Good point Fabien, I guess you would have to handle cases where $(“.sidebar”).height() > $(“.content”).height() otherwise the sidebar will be truncated and you won’t see all its content.
Thanks for the pointer. One of my clients encountered this problem and I had to get creative in helping them. Nice to know I wasn’t alone.
I normally try to fix layout problems with CSS, I’ve never actually thought of using a JQuery before. I’ve certainly had the sidebar problem before! Will try this in the future, thanks.
Michel,
I have updated the code to address your concern.
Hi!
The simplest solution I found, after lots and lots of researching several months ago, is to use tables
There are things that can be done with DIVs, and situations where DIVs work great, but we have to face it. If you want to create a layout with no hacks, tables are the best.
I think a wrote a post about this some months ago:
http://www.codigomanso.com/en/2009/02/should-i-use-tables-for-layout/
Anyway, is like the problem you mentioned with Fibonacci. You can use recursion, but, seriously, if you plan to compute more than the 30th number, what you have to use is a “for”. Even if you want only the 10th number.
Really interesting blog, I’m really enjoying it!