So I posted a question yesterday about placing some divs within a container so that they aligned up against the edge of the container, but had equal spacing between them in the middle. This is complicated by the fact that they are sortable (using jQuery UI Sortable).
Greg Pettit (thanks!) managed to answer it for me, but the behavior of the last two divs in particular is causing an issue that I just can’t figure out.
(Original question for reference: Alignment of sortable jQuery UI divs with spacing between them)
The issue now is, when dragging either the 3rd or the 6th div, it jumps down.
I have no idea why this is happening and can’t work out why the divs are so unstable in general when being dragged :/
jsFiddle > http://jsfiddle.net/hC5Qy/5/
Does anyone have any ideas as to why?
As always, any reply’s are really appreciated!
Many Thanks
I think since the area div is crammed full, as soon as you drag the floated block, it overflows the horizontal space of the area div and breaks to the next line. this may be happening before jQuery UI applies absolute positioning. give some breathing room by adding the following CSS to the middle blocks:
http://jsfiddle.net/hC5Qy/27/