jQuery or JavaScript to make DIV columns same height across across several containers
<p>I have a number of container divs each holding other column divs, I have tried a JavaScript script to make the half column divs resize at the same height. This has worked but this means that all the other half divs on the page resize to that height. See screenshot below. The half divs have the same ID but in different containers. Is there jQuery or JavaScript code that can resize the height across divs within each individual container? </p>

<p>In the screen shot the top row is one container, the bottom row has the div within a different container. I want the bottom row div to resize to match the height of the tallest div within that separate container. But I want to workout several containers that all resize the inner divs across the page. </p>

<p><img src="http://i.stack.imgur.com/hOmBM.png" alt="enter image description here"></p>

<p>Part of the code:</p>

<pre><code>&lt;style&gt;
#page{width:85%; text-align:center;margin:auto;}
#row{width:100%;background:yellow;margin-bottom:1%;}
#container{height: auto;display: table;float:left;}
#header{width:100%;background-color: rgb(0, 143, 213); height:50px;}
#full{width:99%;margin:0.5%;background-color:skyblue;}
.half{width:48%; margin:0.5%;padding:0.5%;float:left; background-color:#1589FF;display: table-cell;}
#third{width:32.333%; float:left; margin:0.5%; background-color:skyblue;}
#th2{width:65.66%; float:left; margin:0.5%; background-color:skyblue;}
#quarter{width:23%; margin:0.5%;padding:0.5%; float:left; background-color:blue;height:100px}

&lt;/style&gt;

&lt;script type='text/javascript'&gt;
$(window).load(function(){
$(window).resize( function() {

var $column = $('.column'),
    maxHeight = 0;

$column.each( function() {
    $(this).removeAttr('style');
    if($(this).height() &gt; maxHeight) {
        maxHeight = $(this).height();
    } 
});

$column.height(maxHeight);

}).trigger('resize');
});  

&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;div id="full"&gt;Menu&lt;/div&gt;
&lt;div id="th2"&gt;2/3&lt;/div&gt;&lt;div id="third"&gt;Third&lt;/div&gt;
&lt;div id="container"&gt;
&lt;div class="half column"&gt;&lt;h1&gt;About&lt;/h1&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.&lt;/div&gt;
&lt;div class="half column"&gt;&lt;h1&gt;News&lt;/h1&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. 


&lt;/div&gt;
&lt;/div&gt;

&lt;div id="container2"&gt;
&lt;div class="half column"&gt;Half&lt;br&gt;more info&lt;/div&gt;&lt;div id="quarter"&gt;Quarter&lt;/div&gt;&lt;div id="quarter"&gt;Quarter&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;
</code></pre>
