title: Output sibling divs next to each other using jQuery
body: <p>I'm trying to create the thumbs next to each other but it's not working. It appears to be outputting them on top of each other. I want them to be 5px apart.</p>
  
  <p>--- I need positioning to be absolute. I need that so that after I get them all next to each other, I want the one that's clicked to grow, and all the ones to the left should disappear to the left, all those right should go right. Absolute Positioning is needed so that I can control that.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="portItem"&gt;
      &lt;div class="itemContent-wrap"&gt;
          &lt;div class="itemContent"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="thumbWrap"&gt;
                      &lt;div class="thumb"&gt;&lt;/div&gt;
                      &lt;div class="thumb"&gt;&lt;/div&gt;
                      &lt;div class="thumb"&gt;&lt;/div&gt;
                      &lt;div class="thumb"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.thumb {
    height: 200px;
    width: 450px;
    position: absolute;
    display: inline-block;
    background: #D0E182;
    margin-top: 25px;
    margin-right: 5px;
    transition: all 1s ease-in-out;
    top: 0;
    left: 0;
  }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$(document).ready(function(){ 
      $('.portItem').each(function() {
          $('.thumb', this).each(function(i) {
                $('.thumb').css('left',40*i);
           }).appendTo('.body');
       });
  });
  </code></pre>
  
  <p>Fiddle:  <a href="http://jsfiddle.net/nTHDk/11/" rel="nofollow">http://jsfiddle.net/nTHDk/11/</a></p>
  
  <p>Solution!: <a href="http://jsfiddle.net/nTHDk/14/" rel="nofollow">http://jsfiddle.net/nTHDk/14/</a></p>
  
  <p>Thank you in advance!</p>