jQuery Tutorial: Using jQuery to align column heights
This tutorial will show you how to use the popular jQuery library to match the height of 2 columns in your layout. I've found that I'm always needing to have this type of feature on design projects in order to make sure a navigation column is the same height as the main body content section, or vice versa. This walk through will get you there with a quick bit of jQuery added to your code.
First, we will start off with the basic XHTML and CSS for the columns in use.
First, for the XHTML:
<div id="test_main_body">
</div>
<div id="test_right_col">
</div>Next, for the basic CSS to represent our items so we can view them easily here:
#test_main_body {
position: relative;
width: 350px;
height: auto;
border: 1px solid #FF0000; /* for testing only */
background: #EEEEEE; /* for testing only */
float: left;
clear: none;
margin: 0 10px 0 0;
padding: 10px;
}
#test_right_col {
position: relative;
width: 250px;
height: auto;
border: 1px solid #000000; /* for testing only */
background: #DDDDDD; /* for testing only */
float: left;
clear: none;
margin: 0;
padding: 10px;
}
We should now have a page that looks like the following:
Test Main Body
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at sem. Mauris ligula felis, euismod sit amet, porttitor sit amet, sagittis quis, erat. Pellentesque ligula purus, vulputate sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at sem. Mauris ligula felis, euismod sit amet, porttitor sit amet, sagittis quis, erat. Pellentesque ligula purus, vulputate sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at sem. Mauris ligula felis, euismod sit amet, porttitor sit amet, sagittis quis, erat. Pellentesque ligula purus, vulputate sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at sem. Mauris ligula felis, euismod sit amet, porttitor sit amet, sagittis quis, erat. Pellentesque ligula purus, vulputate sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at sem. Mauris ligula felis, euismod sit amet, porttitor sit amet, sagittis quis, erat. Pellentesque ligula purus, vulputate sit amet
Right Column
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at sem. Mauris ligula felis, euismod sit amet, porttitor sit amet, sagittis quis, erat. Pellentesque ligula purus, vulputate sit amet
Now we need to download the jQuery library from the jQuery website, and include it into our page using the following code:
<script type="text/javascript" src="/path/to/jquery/jquery.js"></script>Now, we have everything we need in order to apply our jQuery code to this section to figure how first how tall the two elements are, and then make them the same height in order to improve appearance.
First, we use the following two lines to determine the height of the two columns in question.
var left_height = $('#test_main_body').height();
var right_height = $('#test_right_col').height();
Now we have two variables, left_height, and right_height that we can use to compare to each other, and determine what our script needs to do.
The following section is going to first determine if the right column is taller than the left, and if it is taller, we will reset the height of left section to be the same as the height of the right column. Second, if the right column is NOT taller than the left column, it will perform in reverse, and assign the right column the height of the left column, and either way, the columns should match up top and bottom.
if(right_height > left_height) {
$('#test_main_body').height(right_height);
}
else {
$('#test_right_col').height(left_height);
}
Now, with this code applied to our document, our original sections should now render as they do below at the same height.
Test Main Body
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at sem. Mauris ligula felis, euismod sit amet, porttitor sit amet, sagittis quis, erat. Pellentesque ligula purus, vulputate sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at sem. Mauris ligula felis, euismod sit amet, porttitor sit amet, sagittis quis, erat. Pellentesque ligula purus, vulputate sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at sem. Mauris ligula felis, euismod sit amet, porttitor sit amet, sagittis quis, erat. Pellentesque ligula purus, vulputate sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at sem. Mauris ligula felis, euismod sit amet, porttitor sit amet, sagittis quis, erat. Pellentesque ligula purus, vulputate sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at sem. Mauris ligula felis, euismod sit amet, porttitor sit amet, sagittis quis, erat. Pellentesque ligula purus, vulputate sit amet
Right Column
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at sem. Mauris ligula felis, euismod sit amet, porttitor sit amet, sagittis quis, erat. Pellentesque ligula purus, vulputate sit amet
As you can see now, our main body column, and our navigation or right hand column are matching up to exactly the same height. It's as simple as that.
I actually use this method on many of my latest sites to either line up main sections of the body or layout like I've demonstrated here, but there are other times where this can be useful for smaller blocks of content that are nested deeper in the structure of the site.
I hope this helps someone turn what can sometimes be troublesome with pure CSS, but once implemented a couple of times is a pure breeze with the magic of jQuery.
Thanks for this nifty script. I had two problems implementing it though, here's how I solved them.
I had problems with IE; the shorter div scaled, but not to the correct height. This was because I forgot to put a doctype in my testing page. Don't do that.
The second problem arose when I included the doctype. I found that I needed to specify height units in order to make the script work in firefox:
$('#test_main_body').height(right_height + "px");I have no answer for why it works on this page but not for me. It doesn't seem to have to do with jQuery versions, I've tried both 1.0.1 and 1.2.1.
Hope this helps someone out there. Thanks again for the script.
Thanks for the tutorial, Jake! This is great. :-) You can see it in action on my test server: http://www.devineuniverse.com/csv/index.cfm. Keep in mind it is a work in progress.
Also, just as an FYI...it wasn't working very well in FF2 with both the dimensions and jquery.js files included. I removed the dimensions.js file and voila...it's working.
Can't thank you enough!
Jen
It's amazing what a simple little snippet can do to make a layout line up just the way it was intended.
I did just update the article to remove Dimensions per the comment below. I had realized this a couple of weeks back, but hadn't updated it to remove the references to the Dimensions plugin.
I remember the days I used to fight with my CSS to get two columns to line up, and using absolute positioning worked fine in the modern browsers, but in IE6 would always mess up, but with this snippet, it will work in all browsers just by a couple of simple calculations.
Thanks for the comment!
You don't need Dimensions Plugin.
Dimensions 1.2.0
Removed height, width, offset and offsetLite in favor of core versions
Indeed you are right... The original tutorial was written when you would have still needed it, and it didn't get changed when I published it here... I'll probably work on updating it soon, and removing the extra Dimensions stuff.
Thank you for helping out. It works, and this is a big timesaver...
Glad that helped. I've used this tons of times... either for main body sections lining up to sidebar navigation, or sometimes for internal elements when I want two divs to sit side by side, but one is much bigger, and I want them both to appear uniform...
It's a handy little snippet for sure.
I have tried to follow the tutorial, look into your code and read documentation but a just can´t get this to work. Can you give me a hint about what I am doing wrong? Here is my (and yours, I think) code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#test_main_body_after {
position: relative;
width: 350px;
height: auto;
border: 1px solid #FF0000; /* for testing only */
background: #EEEEEE; /* for testing only */
float: left;
clear: none;
margin: 0 10px 0 0;
padding: 10px;
}
#test_right_col_after {
position: relative;
width: 250px;
height: auto;
border: 1px solid #000000; /* for testing only */
background: #DDDDDD; /* for testing only */
float: left;
clear: none;
margin: 0;
padding: 10px;
}
-->
</style>
<script src="jquery-1.2.3.js" type="text/javascript"></script>
<script src="jquery.dimensions.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
(function() {
var left_height = $('#test_main_body_after').height();
var right_height = $('#test_right_col_after').height();
if(right_height > left_height) {
('#test_main_body_after').height(right_height);
}
else {
('#test_right_col_after').height(left_height);
}
});
</script>
<div id="test_main_body_after">asdasdasd
</div>
<div id="test_right_col_after">asdasasdlkj aslkd jasdlkj asdlkj asdlkj asldkj asdlkj asdlkh lahjsgd lahjsg ljh lajksl asdd
</div>
</body>
</html>
It appears that in what you've posted, the following section is just a little off...
var left_height = $('#test_main_body_after').height();var right_height = $('#test_right_col_after').height();
if(right_height > left_height) {
('#test_main_body_after').height(right_height);
}
else {
('#test_right_col_after').height(left_height);
}
It's missing the $ prior to the final 2 jQuery functions...
var left_height = $('#test_main_body_after').height();var right_height = $('#test_right_col_after').height();
if(right_height > left_height) {
$('#test_main_body_after').height(right_height);
}
else {
$('#test_right_col_after').height(left_height);
}
It appears the main starting portion is also missing the following line:
Your code:
(function() {Should be:
$(document).ready(function() {I think that'll solve it for you... let me know if that works!
You should also test if the browser is IE6, and use min-height if not...
If you use the min-height property in CSS, you couldn't set it equal to a variable height DIV that could easily change height from page to page depending on content. Without knowing the height of the taller DIV, you couldn't figure out the needed height of the shorter element.