jQuery UI Sortable pushes down items

Question

I'm having some troubles solving this issue. I've looked at some other related questions but none of those solutions worked for me.

this.$el.sortable({
    placeholder: 'ui-state-highlight',
    connectWith: '.connectedList',
    dropOnEmpty: true
});

Despite trying some of the CSS-tricks that was posted in other solutions, the items are still pushed down as seen by this image:

You can see an example of the code here: http://jsfiddle.net/jxFBj/1/

Answer 1

I'd say the source of the problem is the vertical alignment of inline elements, which is baseline by default. Though it's the mix of inline and (inline-)block elements and the use of margin that finally triggers the problem. I guess it's debatable what the actual origin of the problem is.

Anyways, I can't tell for sure what's going on, but to me it looks like the placeholder (which has no inline content) changes the position of the baseline (not sure why exactly), and so the position of the images, which are inline elements by default, changes too.

There are a few ways to fix this:

Making the images block elements:

.sortableList-item img {
    display: block;
}

Update (13.01.2015): with recent browsers the display trick seems to have the same problem as the vertical-align one mentioned below, ie the elements do shift horizontally.

http://jsfiddle.net/jxFBj/2/

Using floating elements instead of inline blocks:

.ui-state-highlight {
    float: left;
    height: 100px;
    width: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.sortableList-item {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 100px;
    height: 100px;
}

http://jsfiddle.net/jxFBj/3/

Changing the vertical alignment to top works too, but will cause horizontal shifting when the list elements span over multiple lines, so that's probably not an option:

.ui-state-highlight {
    height: 100px;
    width: 100px;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    vertical-align: top;
}

.sortableList-item {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 100px;
    height: 100px;
    vertical-align: top;
}

http://jsfiddle.net/jxFBj/4/