How can I ensure that two divs always have the same height?

I am using jquery-mobile framework. I have two divs side by side (as columns), I am trying to keep their height same irrespective of how much data they contain.

This the html:

  <ul class="datablock" id="Manufacturing_and_Qualification_Information" style="display: none;">    
 <div data-role="controlgroup" data-theme="d" class="ui-grid-m ui-corner-all ui-controlgroup ui-controlgroup-vertical">  
     <div data-theme="d" id="paramBlk" class="ui-block-m"><li>Blah Blah Blah Blah Blah</li></div> 
     <div data-theme="d" id="valueBlk" class="ui-block-n"><li>Blah</li></div>
</div>  
<div data-role="controlgroup" data-theme="d" class="ui-grid-m ui-corner-all ui-controlgroup ui-controlgroup-vertical">  
    <div class="ui-block-m" id="l开发者_如何学CeftBtmRnd"><li>Blah Blah Blah Blah Blah</li></div> 
    <div class="ui-block-n" id="rightBtmRnd"><li>Blah</li></div>
</div>
</ul>

This is the jQuery code, which I tried so for, but it's not working as expected:

var $blockM = $(".datablock").find('.ui-block-m');  
    var $blockN = $(".datablock").find('.ui-block-n');                  
     if($blockM.height() < $blockN.height()){       
        $blockM.css('height',$blockN.height());        
    }else if($blockM.height() > $blockN.height()){   

        $blockN.css('height',$blockM.height());       
    }

How can I achieve this?

Working link : http://jsfiddle.net/bMMpz/1/

Here is the code:

var biggestHeight = 0;
var $blockM;
var $blockN;

$(function() {
    $blockM = $(".datablock").find('.ui-block-m');
    $blockN = $(".datablock").find('.ui-block-n');

    getBiggestHeight();

    $blockN.height(biggestHeight);
    $blockM.height(biggestHeight);
});



function getBiggestHeight() {
    $blockM.each(function(i, e) {
        if ($(e).height() > biggestHeight) biggestHeight = $(e).height()
    });
    $blockN.each(function(i, e) {
        if ($(e).height() > biggestHeight) biggestHeight = $(e).height()
    });
}

I look for the biggest div and then select both selector and set height.

We use a jquery plugin (I guess) called 'equalheights' For this. There seem to be several out there, but they all seem to do the same job. (I'v not picked this one in our project, so I don't know exactly which it is we use, but they seem somewhat equal)

Take a look at this plugin or this plugin, I think they do what you want.

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

    group.height(tallest);

    }
    $(document).ready(function() {
    equalHeight($(".ui-grid-m"));
    });

Or use css3

.datablock
{ display:table;
}
.ui-grid-m
{  display:table-cell;
}

 if($blockM.height() < $blockN.height())
{               
    $blockM.height($blockN.height());             
}else if($blockM.height() > $blockN.height())
{  
   $blockN.height($blockM.height()); 
}

try this

Two column grids

<div class="ui-grid-a">
    <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
    <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div>

Just look in jQuery Mobile

$(document).ready(function({
    var x = $('#primary').height();
    $('#sidebar').css('height', x);
});

Hope this helps.