Sortable doesn't work well with different sized list items

Sortable doesn't work well with different sized list items

I'm trying to make a simple "puzzle" with different-sized blocks. There's a base size; also, some blocks are twice as tall, some twice as wide, and some twice both dimensions.

The problem is that, given a layout like the one in the code below, the middle section is left empty, because block 3 extends into the row below it, making the space unusable. Is there a way (WITHOUT absolute positioning) to make blocks slide into that void?
Style:
  1. .piece {
  2.     clear:none;
  3.     float:left;
  4.     height:195px;
  5.     width:195px;
  6.     border:1px solid white;
  7.     margin:0 3px 3px 0;
  8. }
  9. .tallpiece {
  10.     float:left;
  11.     height:395px;
  12.     width:195px;
  13.     border:1px solid white;
  14.     margin:0 3px 3px 0;
  15. }
  16. .widepiece {
  17.     float:left;
  18.     height:195px;
  19.     width:395px;
  20.     border:1px solid white;
  21.     margin:0 3px 3px 0;
  22. }
  23. .bigpiece {
  24.     float:left;
  25.     height:395px;
  26.     width:395px;
  27.     border:1px solid white;
  28.     margin:0 3px 3px 0;
  29. }
HTML:
  1. <ul id="puzzle">
  2.     <li id="0" class="tallpiece">0</li>
  3.     <li id="1" class="widepiece">1</li>
  4.     <li id="2" class="piece">2</li>
  5.     <li id="3" class="bigpiece">3</li>
  6.     <li id="4" class="piece">4</li>
  7.     <li id="5" class="piece">5</li>
  8.     <li id="6" class="piece">6</li>
  9.     <li id="7" class="piece">7</li>
  10.     <li id="8" class="bigpiece">8</li>
  11. </ul>