When working with a multi column layout where all three containers with dynamic content, you run into a problem with a css limitation (not able to do heigh: 100%;) so this problem has to be solved by using javascript.
Well, here’s the solution!
First write a function to include into the file (I usually use an external js function file so I can apply any of them anywhere needed.)
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
Then to use it simply use the following code in your document.
$(document).ready(function(){
equalHeight($('.your_container'));
});
What this will do is find all elements with the class ‘.your_container’ and make them the same height on the document.
Source: CSS Newbie
Wow, I just published an article on my blog about the very same thing; equal height divs using jQuery.
here’s the URL to the post:
http://www.joptima.com/blog/topic/jquery-equal-height-divs-plugin/
The plugin I wrote is passed 2 Div names. It will look for the tallest and assign its value to the shortest one regardless of their dynamic content (text, images….etc.).
What do you think Jubair?
Thanks.
Hey Ayman! Nice work! your solution for this is a good one if you are only using two elements.. but sometimes there are three elements side by side, or even 4.. this method of doing it makes all boxes/columns with the same class name the same height, so this way you can limit it to just two or as many as you want on the page.
Thanks alot Jubair for pointing that out
np! glad to help any way I can
Thankkkkkkkkkkkkkkkssssssssssssssss a looooooooooot!