title: Floated elements jump when hiding another floated elements
body: <p>I have grid of floated elements, for which I created a filter. I want this filter to hide and show the items and while doing so I want the items to re adjust with transitions and fades.. At the moment the items just jump around.</p>
  
  <p>As you can see here:</p>
  
  <p><strong><a href="https://jsfiddle.net/5saxp0vh/" rel="nofollow">JSFIDDLE</a></strong></p>
  
  <p>How can I make the items slide to their position?</p>
  
  <p>Heres the code: </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="filters"&gt;
      &lt;li data="1"&gt;filter 1&lt;/li&gt;
      &lt;li data="2"&gt;filter 2&lt;/li&gt;
      &lt;li data="3"&gt;filter 3&lt;/li&gt;
      &lt;li data="4"&gt;filter 4&lt;/li&gt;
  &lt;/ul&gt;
  &lt;br&gt;
  &lt;ul class="items"&gt;
      &lt;li data="1"&gt;1&lt;/li&gt;
      &lt;li data="2"&gt;2&lt;/li&gt;
      &lt;li data="1"&gt;3&lt;/li&gt;
      &lt;li data="3"&gt;4&lt;/li&gt;
      &lt;li data="4"&gt;5&lt;/li&gt;
      &lt;li data="2"&gt;6&lt;/li&gt;
      &lt;li data="3"&gt;7&lt;/li&gt;
      &lt;li data="4"&gt;8&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>ul {
      list-style: none;
      padding: 0;
  }
  .filters li {
      float:left;
      margin-right: 10px;
      cursor: pointer;
  }
  .items li {
      width: 100px;
      height: 100px;
      background: #ccc;
      float: left;
      margin: 20px;
  }
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>$(document).ready( function() {
  
  
      $('.filters li').click( function () { 
          var data;
  
          data = $(this).attr('data');
          $('.items li').each( function() {
              if($(this).attr('data') !== data) {
                  $(this).fadeOut();
              }
              else {
                  $(this).fadeIn();
              }
          });
  
      });
  
  });
  </code></pre>