title: JQuery Masonry floating text issue
body: <p>Hi I want to float text on the right and left of the Image, but when I use float inside masonry item, <strong>next</strong> masonry items are placed in next row, not beside. Even when there is a place for them to fit.</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="masonryItem"&gt;
          &lt;div class="accent"&gt;&lt;/div&gt;
          &lt;div class="header" &gt;TITLE
              &lt;div&gt;
                  &lt;div class="imageBox" style="float:left"&gt;
                      &lt;div class="imageInn"&gt;
                          &lt;img src="images/image.png"&gt;
                      &lt;/div&gt;
                      &lt;div class="hoverImg"&gt;
                          &lt;img&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div style="width:252px; height:162px; margin-left:34px; margin-top:86px; text-align:left; margin-right:70px;"&gt;
                      TITLE
  
                      Description
                   &lt;/div&gt;
               &lt;/div&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  
       &lt;div class="masonryItem"&gt;
           &lt;div&gt;
               &lt;div class="imageBox" style="margin-bottom:40px"&gt;
                   &lt;div class="imageInn"&gt;
                       &lt;img src="images/image.png"&gt;
                   &lt;/div&gt;
                   &lt;div class="hoverImg"&gt;
                       &lt;img&gt;
                   &lt;/div&gt;
               &lt;/div&gt;
               &lt;div style="margin-left:40px; text-align:left;"&gt;
                   TITLE
  
                   DESCRIPTION
               &lt;/div&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS:
      .container {
          margin-top:86px; 
          margin-left:53px; 
      }</p>
  
  <pre><code>.imageBox {
      position: relative;
      float: left;
  }
  
  .imageBox .hoverImg {
      position: absolute;
      left: 0;
      top: 0;
      display: none;
  }
  
  .hoverImg img {
      content: url(images/hover.png);
  }
  
  .imageBox:hover .hoverImg {
      display: block;
  }
  
  .accent {
      width:6px; 
      height:184px; 
      background:#000; 
      float:left;
  }
  
  .header {
      margin-top:14px; 
      margin-left:42px;
      font-size:23px;
  }
  </code></pre>
  
  <p>And my JS:</p>
  
  <pre><code>var $container = $('.container');
  
  $container.imagesLoaded( function(){
      $container.masonry({
          itemSelector : '.masonryItem'
      });
  });
  </code></pre>