Update: This concept has been adapted into a full-fledged jQuery plugin. Check it out here. And then read on to learn how this technique is done.
Creating equal-height columns with CSS is sometimes a bear. But who needs the hassle of faux columns, “clear” divs and the rest? With this bit of jQuery, you can easily equalize the heights of any group of elements.
This technique was born of frustration. I ran into two layout problems while working on the redesign of CSS Newbie one afternoon, and both were directly related to the varying heights of elements.
The first problem was in the footer. If you look closely, you’ll see that there is a nice subtle two-tone border in between each of the columns in the footer.
That style wasn’t as easy to create as it might look. At first, I was going to make the border part of the background image, and just edit my content to suit. But that’s very un-web of me: the beauty of the web is we’re not constrained by sizes nearly as much as print designers.
So instead, I decided to make the borders the old-fashioned way, as legitimate CSS borders. Of course, to get it exactly the way I wanted I had to resort to a bit of a hack, matching light borders on the right side of one column with a dark border on the left side of the following column. The hack works beautifully… as long as all three of my columns are of equal height. Otherwise, the borders don’t match:
The second problem I ran into was in the “recent articles” section of the homepage. I wanted to feature four articles, but I didn’t want them to take up a ton of space. To accomplish that, I made the article blocks half as wide as my space and floated them into two columns with two rows.
And as long as I’m lucky and all my excerpts are the same length, that works fine. But the instant something is a line or two longer or shorter, one of the more annoying flaws with floats rears its ugly head. If I have a long excerpt in spot 1, followed by a short excerpt in spot 2, the excerpt in spot 3 won’t float all the way to the left: it’ll get caught on the edge of the first excerpt instead.
So again, I have a height-related problem. “If only there was an easy way to equalize heights without resorting to a table,” I thought thusly.
And so I set out to find an easy way. And after a bit of fiddling with jQuery, I was able to find a workable solution. Here’s the function I ended up with:
1 2 3 4 5 6 7 8 9 10 | function equalHeight(group) { var tallest = 0; group.each(function() { var thisHeight = $(this).height(); if(thisHeight > tallest) { tallest = thisHeight; } }); group.height(tallest); } |
You can see it in action here. What this function is doing is:
- Sets a variable, “tallest,” to zero.
- Loops through each of the items in the group we’ve defined.
- If the current item is taller then the previous “tallest” item, it becomes the new tallest item.
- Once we’ve looked at all the items, they all get their height reset to be the same as the tallest of the group.
So in order to equalize the heights of both my footer columns and my recent articles, all I needed to do was something like this:
1 2 3 4 | $(document).ready(function() { equalHeight($(".recent-article")); equalHeight($(".footer-col")); }); |
Which just waits until all my elements are done loading (so that the heights can be computed accurately), then sets both the heights.
That’s all there is to it! This function is good for fixing wily floats without clears, creating nice equal-height column designs without needing faux columns, and probably half a dozen things I haven’t thought of yet. I’m sure you’ll be able to find a use for the script someday… after all, I managed to find two uses in a single afternoon!
On December 07, 2008
5:06PM
Bram Van der Sype said:
That’s a very handy thing you’ve got there. A while back (when I just started CSS) I believed in the “all things css, no javascript whatsoever” ideology. I soon found out creating equal height columns with pure CSS was a bitch.
I found a piece of javascript that worked brilliantly, but it was quite long. Now, with some jQuery love, it’s easy to do.
Thanks!
On December 08, 2008
10:16AM
Joe McCann said:
Nice, but what happens when JS is turned off?
On December 08, 2008
10:25AM
Steph Adamo said:
I’m pretty excited to use this, but i’ve never used jquery before so i’m admittedly pretty ignorant about how it works. Won’t i need the jquery.js file in order to implement it?
On December 08, 2008
10:45AM
Rob Glazebrook said:
@Bram: Thanks! I’m hoping it will be helpful to people.
@Joe: Without JS, your columns/boxes/whatever will look exactly as they would have looked before you found this lovely script. :) The idea is, get your columns close with CSS, and then perfect them with JS. However, I’d really think that the vast majority of people would be running JavaScript these days. Too many websites use it to ignore on purpose…
@Steph Yeah, you’d need the jquery.js file as well as this script. Basically, you run jQuery first:
<script src=”jquery.js”></script>
Then below that, you’d put this function inside its own <script> tag.
On December 08, 2008
3:43PM
Ben Reimers said:
Very handy! I’ve just been getting into jQuery and have been following handy little hints like this closely. It’s a pity something like this isn’t simply a part of CSS, but that’s the Internet. Thanks for sharing.
On December 09, 2008
7:13PM
jaredmellentine said:
I had just written a jQuery function for this last week. I run the function on all the children of a parent container (passed through the jQuery object). Other than that, we wrote our functions about the same. But here’s mine anyway:
(function(jQuery) {
jQuery.fn.equalHeights = function() {
var maxheight = 0;
jQuery(this).children().each(function(){
maxheight = (jQuery(this).height() > maxheight) ? jQuery(this).height() : maxheight;
});
jQuery(this).children().css(‘height’, maxheight);
}
})(jQuery);
You could extend it a bit more to give a minimum height, too:
(function(jQuery) {
jQuery.fn.equalHeights = function(minheight) {
var maxheight = minheight || 0;
jQuery(this).children().each(function(){
maxheight = (jQuery(this).height() > maxheight) ? jQuery(this).height() : maxheight;
});
jQuery(this).children().css(‘height’, maxheight);
}
})(jQuery);
On December 09, 2008
7:20PM
jaredmellentine said:
I forgot to mention how you would call the function:
jQuery(‘#mycontainer’).equalHeights();
Or with a minimum height of 300px:
jQuery(‘#mycontainer’).equalHeights(300);
On December 10, 2008
11:26AM
Chris Raymond said:
In your example, if you resize text only, the columns do not stay equal in height (well, the backgrounds do, but the text overflows under the boxes)
On December 10, 2008
3:48PM
Rob Glazebrook said:
@jaredmellentine: D’oh! You beat me to it. I was planning on releasing a plugin based on this script yet this week! Actually, I may still… our functions are technically a little different. However, you’ve given me some good ideas for how I can extend the function I’ve written. Thanks!
On December 10, 2008
5:57PM
Grant Palin said:
This is very timely, as I am working on a new theme and was needing some equal-height columns. So simple, yet so useful.
@Chris Raymond: I have noticed this too. But if you refresh the browser window, the columns will be redrawn to contain the text. In Firefox anyway…The same applies for sizing text smaller, the columns will not automatically shrink.
On December 11, 2008
12:45AM
jaredmellentine said:
@Chris and Grant: I guess it’s about time someone write a jQuery event handler for text zoom.
http://design.mellentine.com/2008/12/11/javascript-the-start-of-a-jquery-zoom-event-handler/
On December 11, 2008
3:05PM
Phil said:
Could this be used on grouped columns, so each box is only adjusted to others in the same ‘row’?
I toyed around with a loop function but being a jQuery novice, couldn’t quite get my head around it!
On December 11, 2008
6:46PM
jaredmellentine said:
I finished the jQuery zoom plugin, which may help the issue brought up by Chris. You can check it out here: http://www.dzone.com/links/zoom_event_handling_with_jquery_plugin_demo.html
@Rob: The more I think about this, maybe using the min-height CSS property instead of height would help this issue as well. It wouldn’t keep the columns the same height if you zoomed in, but it should (in browsers that support min-height) extend the container so that the text doesn’t flow out of it.
On December 13, 2008
12:05PM
Rob Glazebrook said:
@Jared: Thanks for the plugin! I’ll be trying it out. Although I’m not sure I agree with using min-height as a workaround. I understand that would fix the overflow property. But as soon as I switch to using min-height, I have an equalHeights plugin that no longer guarantees equal height elements. That seems counterintuitive to me.
On December 13, 2008
9:41PM
jaredmellentine said:
@Rob: I’ve just never been a fan of overflow: auto, except for specific cases. It’s a designer preference to have extra scrollbars or to have containers that don’t line up. I prefer fewer scrollbars because it means that my content is visible without an extra scroll, and I just think it’s a better user experience. Neither solution is ideal. I guess the best way to handle this would be to have some sort of zoom event handler. =)
Most importantly, this issue (zooming that breaks layout) is an infrequent issue. Not only that, but it would be resolved the next time the page loads. It may just be a moot point.
On December 17, 2008
11:38PM
Richard said:
Your example shows that it works very nicely in FireFox (3.x Mac).
Not so much in Safari (Mac). Not sure why, but I do notice that it fits in the default font size, but as I increase font size the text runs down through the bottom of columns [and: width of entire containing area does NOT expand - which it does in FireFox (both horiz & vert)].
Also, I’m wondering if your approach works with various settings for WIDTH of div: since FF wants to expand it as type size grows & Safari does not. Might be worth testing re: what varieties of style respond well (fixed-width; fluid; flexible; %, etc)
It’s a challenging problem: hats off to you for introducing a new approach!
On January 21, 2009
1:39AM
Sedat Kumcu said:
Thanhs thanx thanx maan. Useful and very easy method and understandable article. ;)
On February 11, 2009
9:43PM
Sarah said:
I’m using your script with mixed success. On some pages I have it running on two columns and it seems to work fine. However, I am also trying to run it on a page with four columns (using a separate class name) and it seems that about 3 out of every 5 random refreshes it will calculate the height incorrectly, resulting in the four columns overlapping whatever is underneath. Any suggestions? Is there any way to tell the script to wait until the document is ready, then wait an additional couple of milliseconds?
On March 19, 2009
11:53AM
Kevin Rapley said:
This is a lovely script and will work really nicely with a layout based on widths in em sizes that has to be seriously hacked in order to get a background image or other means to work when the text size is increased/decreased. However if you’re looking to keep fixed width columns in px sizes then I would recommend using a background image to give the illusion. If JavasScript is disabled in a user’s browser the columns not aligning break the design which is just not good enough. It has to align at the bottom of the columns regardless of platform and technology. I don’t think a small amount of CSS telling the background to repeat on a y-axis ever hurt anyone.
On April 20, 2009
11:37PM
SohoInteractive said:
works consistently on all browsers. Thank you for sharing.
K.
On April 27, 2009
3:18PM
Eric Sender said:
You’re a genius, thanks!
On April 30, 2009
4:54AM
Alexandru Dinulescu said:
Hello.
I think you are doing something very wrong with that $(document).ready() part. Since what you do is you put each variable separately instead of them together, so if you look at how the initial function is built, in the document ready you assign each variable to a DIFFERENT instance of the initial function instead of passing all the values through 1 function.
For Ex:
$(document).ready(function() {
equalHeight($(“.recent-article”));
equalHeight($(“.footer-col”));
});
these 2 values are independent from one another, so nothing will be compared between them. first the equalHeight function parses the recent article value, and then it passes the footer-col value but it doesnt compare it. This happened to me today while i was struggling to see why it doesnt work and it just hit me.
In order to make it work you have to make it like this
$(document).ready(function(){
equalHeight($(“#left, #center, #right”));
})
because there is only 1 INSTANCE of the equalHeight, and all the variables are separated by commas. Each function from what i can remember separates the values by commas. Now the function will work 100%.
It may be an oversight but i tested it and this is the result i came across.
Best Regards
AlexD
On April 30, 2009
9:33AM
Rob Glazebrook said:
Hi Alexandru,
You’re right — if you want to compare two items/groups and equalize heights across them, you’d want to include them in a comma-delimited list like you have in your example.
My example was looking at a slightly different use-case. In my example, I had two different groups of columns that needed to be equal heights.
In my example, my “.recent-article” was class applied to four divs, and my “.footer-col” class applied to three divs. I needed all the recent articles to be the same size, and all the footer columns to be the same size, but I didn’t want or need my recent articles to be the same size as my footer columns. So I called the two groups of columns independently, running the function twice.
So to clarify, if you call the function twice, nothing will be compared between the two instances. This may or may not be what you are looking for. :)
On April 30, 2009
10:24AM
Alexandru Dinulescu said:
Hello.
Yes i presumed as much however you may want to edit your blog and place this bit of information in it, because most people who read this arent very proeficient in jQUery and they may just see what you did there and try to emulate that using the method you had applied and making them like that.
My opinion at least.
However it’s a good thing, i’ve used something very similiraly for quite a while and i just realized when i read this topic what the issue actually was.
On May 08, 2009
6:58AM
Jeff said:
@Rob – Thanks for the script! Although I am having trouble with it. I know very little about JS and jQuery, so I’m not the best person to troubleshoot it. I’ve got a page that’s about a 300k load. When I clear my cache and load it the first time, the script calculates well short of the highest column height and then breaks the layout by shortening both columns too much. If I hit refresh, it works beautifully. So it seems like there’s an issue with it not getting all the elements on the page loaded. I wish I could show you an example but I’m developing NDA stuff on an internal network, so…
On May 08, 2009
7:32AM
Rob Glazebrook said:
Hi Jeff,
You might need to wait until the page has completely loaded before firing the script. The easiest way to do that is instead of enclosing the entire thing in this:
$(document).ready(function() {…everything here… });
Try using this instead:
$(window).load(function() { …everything here… });
The downside to this is your columns won’t adjust until everything else on the page has loaded. The upside is, your columns should be the same size.
On May 08, 2009
7:45AM
Jeff said:
Excellent. Works like a charm.
I figured it was something with the page loading, but I didn’t know how to delay the calculation (like I said, I know next to nothing about JS).
Thanks so much for your help!
On May 16, 2009
6:28PM
richard said:
Found this very useful, worked it into a theme, thanks!
On June 04, 2009
8:22AM
Paul Boutin said:
What happens if you have images in your columns?
In jQuery running this function in the ready state of the document is before images are loaded and their heights will not be taken into account. Once the images load your column heights will no longer be equal.
On June 04, 2009
8:44AM
Rob Glazebrook said:
Hi Paul,
That is true — images can cause the script some problems. There are two known (and relatively simple) ways around this problem.
1. Instead of running the script within $(document).ready(), run it in a $(window).load() instead. Whereas document ready fires as soon as all the code is done downloading (but possibly before the images have finished), window load doesn’t fire until even the images are downloaded, allowing the script to make more accurate calculations.
2. If you set a height attribute on your images, that height is used when calculating the overall column height, thus getting around the problem. I realize that width and height aren’t really recommended on images anymore (I’m pretty sure they’re deprecated in XHTML), but I’m personally fond of them and still use them — it prevents your content from re-wrapping once your images have downloaded.
Enjoy!
On June 08, 2009
12:30PM
Ben said:
Awesome, solved a big issue with our new website design.
Thanks a Ton!
On July 09, 2009
5:35AM
Stephen said:
I have been using this script for a while (excellent by the way, as I moved from table to tableless layouts).
I have noted an issue that the heights used are those when the page has loaded. If I inject some content via AJAX into a DIV then call the equalHeights, then the old heights are used instead of the new heights. Seems strange
On August 26, 2009
10:09AM
Stephen said:
@Rob – using $window.load() instead of $document.ready() solved my layout issues.
Now I can grow back my hair :-)
Thanks
On September 30, 2009
4:19AM
judearasu said:
hi i have tried with prototype similar to yours
function equalHeight(group) {
tallest = 0;
group.each(function(c) {
thisHeight = c.offsetHeight;
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.invoke(“setStyle”, {height: tallest + ‘px’})
}
Event.observe(window, ‘load’, function()
{
equalHeight($$(“.column”));
});
On October 29, 2009
12:07AM
jaitnder said:
Nice to have this guide it really helpful…..
On November 01, 2009
10:59PM
Houser said:
You could gain a little more brevity by altering the function like this:
var tallest = 0;
group.each(function(){ tallest = Math.max($(this).height(), tallest); });
group.height(tallest);
On November 19, 2009
5:34PM
Zach Leatherman said:
Dude, watch your globals, you didn’t scope any of the variables.
Use var to declare your variables so they don’t pollute the global variable scope.
On November 19, 2009
5:59PM
Rob Glazebrook said:
Thanks for the comment, Zach. I’ve updated my code to compensate.
On December 03, 2009
2:51AM
Monit said:
Nice and handy code. Love it.
Monit
On December 13, 2009
1:11PM
paul said:
This was perfect – thanks alot.
On March 03, 2010
3:14PM
swire said:
I just enter a list of elements, get the height of each, find the tallest one… set the list to the height of the tallest one…. done…
NO JS = no slideshow, no navigation, no tool tips, no nothing = ancient site = Failed user interface.
On March 12, 2010
1:26PM
ardianzzz said:
yo, thanks for tutorial :)
On April 05, 2010
7:32PM
stefan said:
There seems to be a bug in Webkit when you have a float within one of those divs.
On April 15, 2010
12:10AM
Ayman Aboulnasr said:
Well done! thanks for sharing Rob:)
I have just written a simplified jQuery Height Plugin and posted it ehre if anyone is interested:
http://www.joptima.com/blog/topic/jquery-equal-height-divs-plugin/
On May 07, 2010
1:52PM
Bassel said:
Thank you so much for this very useful piece of javascript
On June 26, 2010
2:58PM
Gabriel Čenkei said:
Very elegant solution. Thanks for sharing.
On July 09, 2010
10:37AM
CBloss said:
Wow. That was incredibly easy solution for such a big headache! THANK YOU!!
On July 14, 2010
8:34PM
Andrew said:
Great job, however a issue with the script is when a user resizes the browser window the heights don’t reset, which sometimes results on in content being hidden.
Solution (Note- My solution adds 50px to accommodate a button on my site that loads on page load which isn’t necessary to fix the above bug) The main change needed is the use of the resize(function().
(function($) {
$.fn.equalHeights = function(minHeight, maxHeight) {
tallest = (minHeight) ? minHeight : 0;
this.each(function() {
if($(this).height() > tallest) {
tallest = $(this).height();
tallest += 50;
}
});
if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
return this.each(function() {
$(this).height(tallest).css(“overflow”,”auto”);
});
}
})(jQuery);
$(“.column”).equalHeights();
$(window).resize(function() {
$(“.column”).each(function() {
$(this).removeAttr(‘style’);
});
$(“.column”).equalHeights();
});
On July 30, 2010
6:04PM
AJ said:
I would like to use this pice of js in a GPL theme I will be releasing. I will give you attribution within the JS file. Is this ok?
On August 31, 2010
3:30PM
Andrew Tibbetts said:
One thing I added to the script to be able to apply the function again once the content has been changed via $.ajax is $(this).height(”); just inside the .each(). This resets the height of the element to the new content and allows var taller to gain a new value.
On October 26, 2010
7:52AM
Ranjit said:
Really simple and interesting. Thanks for sharing…
On November 05, 2010
10:35PM
John said:
Thanks for this script. I was having trouble with table cell height working in FF and IE. This script did the job. Thanks for posting.
On December 03, 2010
4:02PM
Ricardo Zea said:
This is an amazing and easy to use plugin.
However, it has a major problem with Google Chrome… or well, Google Chrome with it.
If you have a floated images (to which the text wraps around of) inside the containers/columns that should be equal heights, Google Chrome assigns a height to the containers/columns BUT ignores the presence of the image.
This means that since the text is wrapping around the image, the container is taller, but with Google Chrome ignoring the image, the containers/columns’s height is as tall as the text, thus any other elements below the text (like ‘Read more…’ links), are left outside the containers/columns.
The only way to fix this is by assigning a width and height to the image, adding any display property doesn’t work.
This is very problematic because your images may probably not be the exact same width and height, or you just simply don’t want to assign a width and height to the images so you can update them easily down the road without having to worry about their dimensions.
I really hope the author acknowledges this problem and updates this wonderful plugin.
Thanks.
On December 20, 2010
5:18PM
daniele said:
I can not see the same height with explorer 8 and 9. solutions … thks
On January 04, 2011
4:10AM
martin said:
Dear all,
The script is working fine, thanks for that!
But, I have a problem. I’m using 3 columns with each a background, which I repeat.
When I put lots of text in 1 column, that column shows 100% of the screen, but after scrolling, the image stops and the text goes on. I would like to see that the backgroundpicture moves on, till the bottom.
The website can be found here, to see for yourself:
http://www.fashionthuis.nl/fashionthuis/
Left column contains text, and the picture stops after a couple of lines.
Tried everything, even clear:both but nothing works.
Any ideas?
On January 04, 2011
5:06AM
daniele said:
Dear all,
The script is working fine, thanks for that!
But, I have a problem. I’m using 3 columns with each a background, which I repeat.
When I put lots of text in 1 column, that column shows 100% of the screen, but after scrolling, the image stops and the text goes on. I would like to see that the backgroundpicture moves on, till the bottom.
The website can be found here, to see for yourself:
http://www.fashionthuis.nl/fashionthuis/
Left column contains text, and the picture stops after a couple of lines.
Tried everything, even clear:both but nothing works.
Any ideas?
if u use “ul” list:
img…
img..
div{
background: none;
border: 0;
clear: both;
display: block;
float: none;
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
On January 13, 2011
12:23PM
Loko said:
You’re my hero for today! Thanks!
On January 13, 2011
5:22PM
evan said:
I helped modify this accordion (http://jsbin.com/ucobo3/23/), which is surrounded by two columns with a border. When the accordion expands, it will overflow the column borders.
So, I included $(this).height(tallest).css(“overflow”,”auto”) which places the accordion in a vertical scroll bar when the menus expand shown here: http://jsbin.com/ucobo3/20/
The preferred effect is to have the accordion expand the equal height of the accordion for both columns.
would you be able to provide any assistance with this? Thank you so much!
On January 21, 2011
8:28AM
shishir singh said:
Good job man… working great!!! Cheers
On January 26, 2011
1:40PM
Stephen Akins said:
This jQuery will make the DIVs on each row the same height (rather than all of the DIVs). My example assumes all the DIVs have the class “floatingDiv” assigned to them:
$(document).ready(function() {
var currentTallest = 0;
var currentRowStart = 0;
var rowDivs = new Array();
$(‘div.floatingDiv’).each(function(index) {
if(currentRowStart != $(this).position().top) {
// we just came to a new row. Set all the heights on the completed row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest);
// set the variables for the new row
rowDivs.length = 0; // empty the array
currentRowStart = $(this).position().top;
currentTallest = $(this).height();
rowDivs.push($(this));
} else {
// another div on the current row. Add it to the list and check if it's taller
rowDivs.push($(this));
currentTallest = (currentTallest < $(this).height()) ? ($(this).height()) : (currentTallest);
}
// do the last row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest);
});
});
On March 14, 2011
12:32PM
Stephen Akins said:
If you want to have equal heights PER ROW (which is especially useful for liquid designs where the number of columns per row is determined browser side), AND have them resize automatically when the window is resized, try this:
var currentTallest = 0;
var currentRowStart = 0;
var rowDivs = new Array();
function setConformingHeight(el, newHeight) {
// set the height to something new, but remember the original height in case things change
el.data(“originalHeight”, (el.data(“originalHeight”) == undefined) ? (el.height()) : (el.data(“originalHeight”)));
el.height(newHeight);
}
function getOriginalHeight(el) {
// if the height has changed, send the originalHeight
return (el.data(“originalHeight”) == undefined) ? (el.height()) : (el.data(“originalHeight”));
}
function columnConform() {
// find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
$(‘div.column’).each(function(index) {
if(currentRowStart != $(this).position().top) {
// we just came to a new row. Set all the heights on the completed row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);
// set the variables for the new row
rowDivs.length = 0; // empty the array
currentRowStart = $(this).position().top;
currentTallest = getOriginalHeight($(this));
rowDivs.push($(this));
} else {
// another div on the current row. Add it to the list and check if it's taller
rowDivs.push($(this));
currentTallest = (currentTallest < getOriginalHeight($(this))) ? (getOriginalHeight($(this))) : (currentTallest);
}
// do the last row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);
});
}
$(window).resize(function() {
columnConform();
});
$(document).ready(function() {
columnConform();
});
On March 17, 2011
11:41AM
Aamir Afridi said:
I tried something http://aamirafridi.com/jquery/jquery-equal-columns-height-plugin (check the demo on link)
On March 27, 2011
2:01PM
Web Design Leicester said:
Many thanks to Rob Glazebrook above who said instead of:
$(document).ready(function() {…everything here… });
Try using this instead:
$(window).load(function() { …everything here… });
The problem I had is that the column height was inconsistent, especially between a hard reload and soft refresh, probably due to a CSS file loading after the document.ready fires. The above fixed this problem.
On March 31, 2011
9:44AM
Mark said:
hi, thanks a lot for this. but i have a certain issue. if i add an img src to my div, the equal column won’t work, it seems the image is isn’t part of the div.
On March 31, 2011
1:56PM
Rob Glazebrook said:
Hi Mark,
The problem is, until your image loads, the browser doesn’t know how tall it’s going to be. And images load after $(document).ready() fires. You have two options to make this work:
Call the plugin on $(window).load() instead of $(document).ready(). This will mean that your columns may take a little bit to adjust, if you have lots of images and a slow-loading page, but it’ll work.
Set width and height attributes on your images. That way, the browser knows right away how big the images are going to be, and can take them into consideration at document ready.
On April 29, 2011
12:53PM
Daniel said:
Hi Rob,
Thanks for posting this. I’m a newbie to JS and jQuery, so forgive me if there is some obvious answer to this. This script works fine; however, when I have a JS widget in one of my columns, the script overlooks it and cuts off the height, leaving the widget outside of the column. I tried using $(window).load(function()…(thinking this may work), but still no luck.
On May 21, 2011
1:31AM
Filipe Valente said:
Can’t get it to work on WordPress
On October 06, 2011
7:46AM
Ronald Kail said:
Hey there! Do you use Twitter? I’d like to follow you if that would be okay. I’m absolutely enjoying your blog and look forward to new updates.
On November 19, 2011
11:11AM
kangtatang said:
Thank you, this post is really help me :D
now I can try to make a better layout for my Web Design.. :)
On December 21, 2011
1:10PM
Lukasz said:
joe, welcome to 2011 where almost no one runs websites without JS. if they do they are probably on a screen reader and don’t need visual elements anyway. people are too pedantic about those things, its silly.
On December 21, 2011
1:12PM
Lukasz said:
p.s. there is a much easier method using jquery:
$(“.recent-article”).height($(“.footer-col”).height());
no need for a loop….