Equal Height Columns, Again
It’s been quite a long time since I wrote a real post, but I promise you, this is a good one (I think).
The Problem
Not so long ago I had to design a site that required two columns to be of equal height. I had seen a few CSS tutorials out there but truth be told, they were complicated and simply not worth the trouble. I then turned to JavaScript, a designers second best friend, CSS being the first one. The code itself was not too complicated but it was rather long.
A New Solution
Although JavaScript worked wonders for the problem I had to solve, I was not entirely content with the length of the solution (code). I looked around for JavaScript libraries that would help me reduce the lines of code and I came across jQuery. If you have never heard of this library I would recommend clicking on the link and doing so.
The Code
In order to make the JavaScript work, you are going to have to download jQuery. Don’t worry is only a 77kb file. After you have downloaded jQuery, insert it into your HTML with the following line:
- <script type="text/javascript" src="jquery.js"></script>
Now, in order to make your columns be of equal height add the following HTML to your page:
- <meta name=”equal_height” content=”[column name] [column name] …” />
[Column name] can be either a class or an ID. For example, if you have a div with class “sidebar,” the “column name” would be .sidebar and if it was an ID instead of a class then the “column name” would be #sidebar. Finally, the moment we have all been waiting for, the JavaScript:
Closing Remarks
If you wish to use this code on your own projects I would only ask for a little bit of recognition. The code is free but it is always nice to credit people, at least I think so. In any case, I hope this post (tutorial) was helpful. Please leave comments and let me know if you know of a better way to approach this problem.
