title: How to equalize hights of divs quickly on IE7?
body: <p>I am trying to equalize "row" hights of a project I am working on and am running into speed issues. I have 60 to 90 rows and 4 to 10 columns. This whole setup cannot be generated in a real table due to other requirements so I have been using the jQuery.equalhights plugin, which works great, but when you get to 240 "cells" it takes about 5 seconds to finish on IE7 &amp; 8 (FF and other modern browsers are fast)</p>
  
  <p>So is there a faster way to do this then looping though every div in the row and recording the tallest then setting the hight on all the divs to the tallest hight?</p>
  
  <p>Example HTML. I need all *row-# divs to be equal height to the all other *row-#.
  So the height of <code>label-row-0</code> = <code>item-1-row0</code> = <code>item-2-row-0</code> = <code>item-3-row-0</code> = <code>item-4-row-0</code> and the max height in this happens to be <code>item-2-row-0</code></p>
  
  <pre><code>&lt;div style="float: left"&gt;
      &lt;div id="label-row-0"&gt;label&lt;/div&gt;
      &lt;div id="label-row-1"&gt;label&lt;/div&gt;
      &lt;div id="label-row-2"&gt;label&lt;/div&gt;
      &lt;div id="label-row-3"&gt;label&lt;/div&gt;
  &lt;/div&gt;
  &lt;ul style="margin: 0; padding: 0; list-style: none; float: left;"&gt;
      &lt;li&gt;
          &lt;div id="item-1-row-0"&gt;bla&lt;/div&gt;
          &lt;div id="item-1-row-1"&gt;bla&lt;br/&gt;bla&lt;/div&gt;
          &lt;div id="item-1-row-2"&gt;bla&lt;br/&gt;bla&lt;/div&gt;
          &lt;div id="item-1-row-3"&gt;bla&lt;br/&gt;blabla&lt;br/&gt;blabla&lt;br/&gt;bla&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div id="item-2-row-0"&gt;bla&lt;br/&gt;blabla&lt;br/&gt;bla&lt;/div&gt;
          &lt;div id="item-2-row-1"&gt;bla&lt;/div&gt;
          &lt;div id="item-2-row-2"&gt;bla bla bla&lt;/div&gt;
          &lt;div id="item-2-row-3"&gt;bla&lt;br/&gt;bla&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div id="item-3-row-0"&gt;bla&lt;/div&gt;
          &lt;div id="item-3-row-1"&gt;bla&lt;/div&gt;
          &lt;div id="item-3-row-2"&gt;bla&lt;/div&gt;
          &lt;div id="item-3-row-3"&gt;bla&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div id="item-4-row-0"&gt;blabl;a bhdks&lt;/div&gt;
          &lt;div id="item-4-row-1"&gt;fvhsdjk vbhsdivbsibn ikvjchwib&lt;/div&gt;
          &lt;div id="item-4-row-2"&gt;gfwei bcvieufhci bwuued&lt;/div&gt;
          &lt;div id="item-4-row-3"&gt;fgbuisdk bnib cieuh9b&lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The li elements are sortable via jQuery UI and need to be allowed to horizontally scroll while keeping the label div fixed in-place. I am basically building a column centric table that has a locked column and locked header and it needs to be column sortable, which I have found no way to do with a regular table or existing jQuery plugins</p>