Fill empty spaces in a list element
<p>I have a fluid grid (in height and width). The LIs are always rectangular and adapt them self's to the screen size.</p>

<p>Now i need to fill the lists, so they all have the same height.
This would be easy if the all the columns had a with of one LI element.
But there are double sized columns and some of them can contain big sized LI's. In some cases there is even empty spaces in the middle of the column, because there is a big Li a small one and just after it a big one again.</p>

<p>On some content pages all li's are in a single column.</p>

<p>In every case the li's are floated left. I have made some images to explain the problem:</p>

<p><img src="http://i.stack.imgur.com/khQae.gif" alt="grid problem"> <img src="http://i.stack.imgur.com/W9g1J.gif" alt="grid problem2"></p>

<p>First i wanted to count the child's and compare them. But it got complicated when all LI's are in a single column or when a LI's is missing in the middle of the column.</p>

<p>This is what i have tried:</p>

<pre><code>var longest = 0

$("ul.grid-col").each(function(){
    var liCount, $that = $(this);
    liCount = $that.find("&gt; li").length;

    if ($that.is(".double")){
       if( $that.find("li.big").length ){
          var bigCount = $that.find("li.big").length
          liCount = (liCount - bigCount) + (bigCount * 4) //because one big has the size of 4 small one 
       }
     liCount = liCount / 2

    }

    if ( longest &lt; liCount ){
       longest = liCount
    }
})
</code></pre>

<p>Now i know how many LI's i need to fill the empty spaces, its pretty easy to fill them up. But how do i find out if there is a empty space in the middle of the li's? And how would you handle the special case of the single column?</p>
