title: Setting equal heights for div's with jQuery
body: <p>I want to set equal height for divs with jQuery. 
  All the divs may have different amount of content and different default height. Here is a sample of my html layout:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="column"&gt;This is&lt;br /&gt;the highest&lt;br /&gt;column&lt;/div&gt;
      &lt;div class="column"&gt;One line&lt;/div&gt;
      &lt;div class="column"&gt;Two&lt;br /&gt;lines&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;div class="column"&gt;One line&lt;/div&gt;
      &lt;div class="column"&gt;Two&lt;br&gt;lines&lt;/div&gt;
      &lt;div class="column"&gt;One line&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm setting the height with the next jQuery function:</p>
  
  <pre><code>$(document).ready(function(){
  
      var highestBox = 0;
          $('.container .column').each(function(){  
                  if($(this).height() &gt; highestBox){  
                  highestBox = $(this).height();  
          }
      });    
      $('.container .column').height(highestBox);
  
  });
  </code></pre>
  
  <p>This works fine but not in my case because I want all the 'columns' equal only inside one 'container'. This means that in the first container all the boxes must be as high as the first div, but in the second one they must be equal to second column.</p>
  
  <p>So question is -- how should I modify my jQuery to reach this?</p>
  
  <p>Thank you!</p>