jQuery UI resizable overlap issue

Question

I am getting an issue with the resizable class in jQuery UI (http://jqueryui.com/resizable/) When the resizing start, all of the below div move to overlap with the div getting resized. Using the js console in chrome, I've noticed that resizable put something in cssText. (position: absolute; top: 24px; left: 593.90625px; height: 218px; width: 161px;) By removing it, overlapping stop, but the div is not resized anymore.

HTML :

<div id="widget1" class="widget taille-2-2 drag">
    Val : <span id="span1">10</span>
</div>
<div id="widget2" class="widget taille-1-1 drag">
    Val : <span id="span2">20</span>
</div>
<div id="widget3" class="widget taille-2-1 drag">
    Val : <span id="span3">30</span>
</div>

CSS :

.widget {
    padding: 2px;
    border: 2px solid #ccc;
    float: left;
    overflow: hidden;
}

.taille-1-1 {
    width: 47px;
    height: 47px;
}

.taille-2-1 {
    width: 104px; /* taille*2+padding*2+border*2+tile.margin*2 */
    height: 47px;
}

.taille-2-2 {
    width: 104px;
    height: 104px;
}

.drag {
    position: relative;
    margin: 3px;
}

Javascript :

$(".drag").draggable(
{
     helper: "clone"
});
$(".widget").resizable(
{
    grid: [57,57],
    maxHeight: 332,
    maxWidth: 218
});

here is the fiddle.

Answer 1

I've found a way to solve the problem, tough I don't understand why it is working :

Javascript :

$(".drag").draggable(
{
     helper: "clone",
     addClasses: false
});
$(".widget").resizable(
{
    grid: [57,57],
    maxHeight: 332,
    maxWidth: 218
});