title: jquery sortable blocks with various height
body: <p>I'm trying to make sortable blocks with various heights using JQuery <code>.sortable()</code>. </p>
  
  <p>But if you try to move the big block to the right then one of small boxes moves to bottom and leaves blank place.</p>
  
  <p>And when I set <code>float: right</code> to parent div instead of <code>float: left</code> I can't drag the big block to the left correctly.</p>
  
  <p>I understand why it happens and how the <code>float</code> works but I can't find a workaround.</p>
  
  <p><a href="http://jsfiddle.net/tnLcg/4/" rel="nofollow">jsFiddle sample</a></p>
  
  <p><strong>UPDATE:</strong>
  <a href="http://i.imgur.com/r1UBc.png" rel="nofollow">Here</a> is complete picture of what I'm trying to do. All I want is to be able to create this structure from blank page using only 6 sizes of width, resizable height and sortable items.</p>