I am working with this library: HTML5 Sortable Drag and Drop.I am using it for blocks, 2 columns wide. The markup for it:\[code\]<ul class="sortable grid"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li style="height: 200px;">Item 4</li> <li>Item 5</li> <li>Item 6</li> <li style="height: 200px;">Item 7</li> <li>Item 8</li></ul>\[/code\]I am having an issue though. When certain blocks have different heights, I need to somehow clear the \[code\]float\[/code\] after the 2nd block so that it does not mess up the layout.
There is a live working demo here, if anyone has any ideas. I have tried doing \[code\].sortable>:nth-child(odd) {clear:left}\[/code\] with the selector on the Odd \[code\]li\[/code\] list items and this works appearance wise, but it messes up the functionality of the drag and drop, when you drop items they will not go into the correct position when I do that.And ideas? I am at a loss right now.I have also tried wrapping every set of 2 blocks inside there own container which helps but then the drag and drop does not work correctly as the library adds a \[code\]dragable\[/code\] to the container divs.This is an image of the goal, of how it should look:
