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">
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.
Bedrich Rios » Blog Archive » Site News
April 09
[...] statistics for my site show that the most viewed posts in my site are the Equal Heights Columns, Again, jQuery Toggle Menu and Mootools Style Sidebar Using jQuery posts the most. Therefore, my goal from [...]
Gavin McFarland
April 29
Interesting use of the meta tag. Can you explain the reasons for using this?
None the less I’m going to try this technique out. Thanks.
Bedrich
April 29
@Gavin
Indeed, a very “interesting” use of the META tag. I chose the meta tags because the CMS that my work uses does not allow users to enter SCRIPT or LINK tags to the header of a page. However, it does allow the insertion of META tags. Thus, instead of having the everyday user dig into the script’s code and change it, I decided to allow the user to make this changes from a META tag. This can easily be changed so that the information necessary to trigger the script can be gathered from a SCRIPT tag or changed from within the code. Let me know if you need help with that. Thanks for reading.