Scrolling create rows in IE9 on drag & drop elements

Question

https://jsfiddle.net/hjcsnrs3/1/

I have created above fiddle to explain my problem. I am using jQuery sortable for drag-drop elements horizontally. Works fine in Chrome/FF. But in IE, especially IE9, whenever I drag and element, it drops to next row. Each drag drop create new row.

$( function() {
  $( "#sortable" ).sortable({
    items: "> div",
    opacity: 0.8,
    placeholder: "placeholder",
    tolerance: "pointer",
    helper: "original",
    revert: true,
    axis: "x"
  });
  $( "#sortable" ).disableSelection();
});

Answer 1

I made a local copy in check on IE every version. It works fine in all version except IE5. IE5 has the same issue as you have mentioned.

CSS element>element Selector is supported below IE7. For element>element to work in IE8 and earlier, a <!DOCTYPE> must be declared.

change it from:

#sortable >div { float: left; }

to:

.ui-sortable-handle{float:left;}

Updates Fiddle