title: position:absolute is floating over the element
body: <p>just would like to know how i can stop the position:absolute element to stop floting over the wapper div </p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;?php
  echo "&lt;div class='pinWrapper'&gt;";
  echo "&lt;h2&gt;New Arrivals&lt;/h2&gt;";
  echo "&lt;br /&gt;";
  $all_products = get_all_products();
  while ($product = mysql_fetch_array($all_products))
  {
      echo "&lt;div class='block'&gt;";
      echo "&lt;a href='?page=product&amp;itm=" . urlencode($product["Id"]) . "'&gt;";
      $Id = $product['Id'];
      $limit = 1;
      $img_set= get_images_by_id($Id, $limit);
      while ($img = mysql_fetch_array($img_set))
      {
          echo "&lt;img src='sto/" . $img["image_name"] ."'&gt;";
      }
      echo "&lt;/a&gt;";
      echo "&lt;a href='?page=product&amp;itm=" . urlencode($product["Id"]) . "'&gt;" . $product['item_name'] . "&lt;/a&gt;";
      echo "&lt;div class='hpDis'&gt;" . $product['sm_description'] . "&lt;/div&gt;";
      echo "&lt;/div&gt;";
      echo "&lt;div class='clear'&gt;&lt;/div&gt;";
  }   
  echo "&lt;/div&gt;";
  ?&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.pinWrapper {
      position: relative;
      margin: 0 auto;
      width:720px;
  }
  .block{
      position: absolute;
      background: #eee;
      padding: 1px;
      width: 210px;
      border: 1px solid #ddd;
          -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;
      -ms-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;
  }
  .block img {
      width: 200px;
      height: auto;
  }
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>    var colCount = 0;
  var colWidth = 0;
  var margin = 20;
  var windowWidth = 800;
  var blocks = [];
  
  $(function(){
      $(window).resize(setupBlocks);
  });
  
  function setupBlocks() {
      //windowWidth = $(window).width();
      colWidth = $('.block').outerWidth();
      blocks = [];
      console.log(blocks);
      colCount = Math.floor(windowWidth/(colWidth+margin*2));
      for(var i=0;i&lt;colCount;i++){
          blocks.push(margin);
      }
      positionBlocks();
  }
  
  function positionBlocks() {
      $('.block').each(function(){
          var min = Array.min(blocks);
          var index = $.inArray(min, blocks);
          var leftPos = margin+(index*(colWidth+margin));
          $(this).css({
              'left':leftPos+'px',
              'top':min+'px'
          });
          blocks[index] = min+$(this).outerHeight()+margin;
      }); 
  }
  
  // Function to get the Min value in Array
  Array.min = function(array) {
      return Math.min.apply(Math, array);
  };
  </code></pre>
  
  <p>Live example <strong><a href="http://jdshomecomforts.co.uk" rel="nofollow">here</a></strong></p>
  
  <p>Any help is greatly appreciated.</p>