title: jquery isotope horizontal elements overlapping
body: <p>i am trying todo a horizontal isotope and if you look at the following fiddle you can see the problem:</p>
  
  <p>the elements are overlapping...</p>
  
  <pre><code>&lt;div class="cal"&gt;
  &lt;div class="col"&gt;
      &lt;div class="head"&gt;
          1                
      &lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;div class="container"&gt;
           &lt;div class="shape"&gt;
               &lt;div class="inner-wrapper"&gt;
                   &lt;div class="event"&gt;
                       &lt;div class="main-avatar"&gt;
                           &lt;a href="#"&gt;
                               img &lt;p style="display: inline; margin-left: 3px;"&gt;name&lt;/p&gt;
                           &lt;/a&gt;
                       &lt;/div&gt;
                       &lt;h5&gt;&lt;a href="#"&gt;something&lt;/a&gt;&lt;/h5&gt;
                   &lt;/div&gt;
                   &lt;p style="padding-bottom: 0px"&gt;home&lt;/p&gt;
                   &lt;p style="padding-bottom: 0px"&gt;9:00 AM-9:00 AM&lt;/p&gt;
               &lt;/div&gt;
               &lt;div class=""&gt;
                   &lt;a href="#"&gt;More...&lt;/a&gt;
               &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="shape"&gt;
               &lt;div class="inner-wrapper"&gt;
                   &lt;div class="event"&gt;
                       &lt;div class="main-avatar"&gt;
                           &lt;a href="#"&gt;
                               img &lt;p style="display: inline; margin-left: 3px;"&gt;name&lt;/p&gt;
                           &lt;/a&gt;
                       &lt;/div&gt;
                       &lt;h5&gt;&lt;a href="#"&gt;something&lt;/a&gt;&lt;/h5&gt;
                   &lt;/div&gt;
                   &lt;p style="padding-bottom: 0px"&gt;home&lt;/p&gt;
                   &lt;p style="padding-bottom: 0px"&gt;9:00 AM-9:00 AM&lt;/p&gt;
               &lt;/div&gt;
               &lt;div class=""&gt;
                   &lt;a href="#"&gt;More...&lt;/a&gt;
               &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="shape"&gt;
               &lt;div class="inner-wrapper"&gt;
                   &lt;div class="event"&gt;
                       &lt;div class="main-avatar"&gt;
                           &lt;a href="#"&gt;
                               img &lt;p style="display: inline; margin-left: 3px;"&gt;name&lt;/p&gt;
                           &lt;/a&gt;
                       &lt;/div&gt;
                       &lt;h5&gt;&lt;a href="#"&gt;something&lt;/a&gt;&lt;/h5&gt;
                   &lt;/div&gt;
                   &lt;p style="padding-bottom: 0px"&gt;home&lt;/p&gt;
                   &lt;p style="padding-bottom: 0px"&gt;9:00 AM-9:00 AM&lt;/p&gt;
               &lt;/div&gt;
               &lt;div class=""&gt;
                   &lt;a href="#"&gt;More...&lt;/a&gt;
               &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;                
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="http://jsfiddle.net/XVqkC/2/" rel="nofollow">an example you can see and test</a></p>
  
  <p>The funny part is that if you resize the window isotope renders the elements correct...</p>
  
  <p>is this a bug for isotope or am i doing something wrong?</p>
  
  <p>any help would be great ...</p>
  
  <p>thanks
  Chris</p>