How to make the height of the DIVs equal ?

In this tutorial i will show how can we make the heights of two divs equal by using jquery css.

I found this jquery when i was searching for the same question on net & it works perfectly.
We might have some divs which has different heights some thing like shown in image besides, but we want both divs to be of same height .

We can use jquery for doing this insted of changing the css .

function equalHeight(group) 
{  
var tallest = 0;
group.each(function() 
{   
var thisHeight = $(this).height();
if(thisHeight > tallest) 
{  
tallest = thisHeight;   
}  
});
group.height(tallest); 
}

This is the jquery which works perfectly....

What does this jquery do ?

It sets the "tallest" equals zero & then loops through each div in the
group & sets the tallest height as highest height of the "tallest" variable.

Value of the "tallest" variale is applied to whole group.

So to equalize the height of each div we need to do this...

$(document).ready(function() 
{
equalHeight($(".container));
}
);

where ".container" is the class of which is applied to each of the div.....

Lets see the bellow example to understand more ....

< !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>
< title>Untitled Page
< style>
#col1{ height:auto;width:200px;float:left;background-color:Aqua;}
#col2{ height:auto;width:200px;float:left;background-color:Beige;}
< /style>
< script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">< / script>
< script type="text/javascript">
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".container"));
});
< / script>
< / head>
< body>
< div class="container" id="col1">
The mango is a fleshy stone fruit belonging to the genus Mangifera, consisting of numerous species of
tropical fruiting trees in the flowering plant family Anacardiaceae.
< / div>
< div class="container" id="col2">
The mango is a fleshy stone fruit belonging to the genus Mangifera,
consisting of numerous species of tropical fruiting trees in the flowering plant family Anacardiaceae.
While other Mangifera species (e.g. horse mango, M. foetida) are also grown on a more localized basis,
Mangifera indica – the common mango or Indian mango – is the only mango tree commonly cultivated in many
tropical and subtropical regions, and its fruit is distributed essentially world-wide.
< / div>
< / body>
< / html>


Without jquery output will be something like this....


While applying jquery we need to take care of some things...

1. all divs which should have height equal should be applied with float:left or right & some width.
2. < script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> should be there , else jquery wont work.
3. ".container" class should be applied to each div . & in jqury as shown.

So after applying this jquery output should look something like this...


I found this on http://www.cssnewbie.com/equal-height-columns-with-jquery/ website ....

We can do same thing with more than 2 divs also....