title: How do I keep multiple DIVs the same height using jQuery?
body: <p>I've got a few DIV tags with different amounts of text content.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="boxes"&gt;
      &lt;div id="boxone"&gt;
          &lt;p&gt;...&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="boxtwo"&gt;
          &lt;p&gt;...&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="boxthree"&gt;
          &lt;p&gt;...&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="boxfour"&gt;
          &lt;p&gt;...&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>They're in a two-by-two layout and their width is fluid:</p>
  
  <p>CSS:</p>
  
  <pre><code>div#boxes {
      width: 100%;
  }
  
  div#boxes div {
      width: 49.9%;
      float: left;
  }
  </code></pre>
  
  <p>I want them all the same height.</p>
  
  <p>So, I loop through them and find the height of the tallest one.  Then I loop again and set them all to that height.</p>
  
  <p>jQuery:</p>
  
  <pre><code>$(function() {
      var maxHeight = 0;
      $('div#boxes div').each(function(){
          if (maxHeight &lt; $(this).height()) {maxHeight = $(this).height()}
      });
      $('div#boxes div').each(function(){
          $(this).height(maxHeight);
      });
  });
  </code></pre>
  
  <p>This works well if the height of the div doesn't need to change again.</p>
  
  <p>But, it fails if I resize the browser window:</p>
  
  <ol>
  <li><p>If I (a) make the browser wider, then (b) my
  DIVs get wider, then (c) their text
  content wraps fewer times, and then (d)
  my DIVs are too tall.</p></li>
  <li><p>If I (b) make the browser more narrow,
  then (b) my DIVs get narrower, then (c)
  their text content wraps more, and 
  then (d) my DIVs are too short.</p></li>
  </ol>
  
  <p>How do I both (1) automatically size DIVs to the height of their content like normal, but also (2) keep those multiple DIVs the same height?</p>