title: jquery box-alignment
body: <p>I have a (hopefuly) simpley question.. I have created a grid view of images. and i want it to pop up, and show a bigger image of the image u have click'd on.</p>
  
  <p>but its made simply with float left. and jquery animate height/width. but sometimes there is a blank place, and i want it to be used aswell.</p>
  
  <p>all my code should explain it :)</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;style type="text/css"&gt;
      .img{
          margin:5px;
          height:138px;
          width:138px;
          border:solid 1px red;
          float: left;
      }
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function(){
      $('.img').click(function(){
  
          $('.img').each(function(){
              $(this).animate({
              height: '138px',
              width: '138px'
              },200);
          });
          if($(this).width() &gt; 139){
              $(this).animate({
              height: '138px',
              width: '138px'
          },200);
          }else{
              $(this).animate({
                  height: '288px',
                  width: '288px'
              },200);
          }
      });
  });
  
  &lt;/script&gt;
  &lt;body&gt;
      &lt;div style="height:800px;width:600px;border:solid 1px green;overflow:auto;"&gt;
  
          &lt;div class="img"&gt;&lt;/div&gt;
          &lt;div class="img"&gt;&lt;/div&gt;
          &lt;div class="img"&gt;&lt;/div&gt;
          &lt;div class="img"&gt;&lt;/div&gt;
          &lt;div class="img"&gt;&lt;/div&gt;
          &lt;div class="img"&gt;&lt;/div&gt;
          &lt;div class="img"&gt;&lt;/div&gt;
          &lt;div class="img"&gt;&lt;/div&gt;
          &lt;div class="img"&gt;&lt;/div&gt;
          &lt;div class="img"&gt;&lt;/div&gt;
          &lt;div class="img"&gt;&lt;/div&gt;
          &lt;div class="img"&gt;&lt;/div&gt;
          &lt;div class="img"&gt;&lt;/div&gt;
          &lt;div class="img"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>