title: jQuery Equal Heights and Dynamic Content
body: <p>I found the following jQuery, and it works great for a page that does not have dynamic content in a grid loading on the page as you click from tab to tab. One tabbed section of the grid, the default, will adjust the equal height correctly with the below jQuery, but when the user then clicks on one of the other tabs to load other content into the grid (in which the grid is a lot more content), the equal height jQuery does not adjust, which results in the content in the grid explaning beyond the footer or other content outside and below the grid.</p>
  
  <p>Can someone please help me with the provided jQuery so that it will adjust the equal height dynamically?</p>
  
  <p>Thank you!</p>
  
  <pre><code>$(document).ready(function () {
      $('.content').each(function () {
          var highestBox = 0;
          $('.equalcontentcolumn', this).each(function () {
              if ($(this).height() &gt; highestBox)
                  highestBox = $(this).height();
          });
  
          $('.equalcontentcolumn', this).height(highestBox);
      });
  });
  </code></pre>