javascript - jQuery UI resizable overlap issue -

i getting issue resizable class in jquery ui (http://jqueryui.com/resizable/) when resizing start, of below div move overlap div getting resized. using js console in chrome, i've noticed resizable put in csstext. (position: absolute; top: 24px; left: 593.90625px; height: 218px; width: 161px;) removing it, overlapping stop, div 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 fiddle.

i've found way solve problem, tough don't understand why working :

javascript :

$(".drag").draggable( {      helper: "clone",      addclasses: false }); $(".widget").resizable( {     grid: [57,57],     maxheight: 332,     maxwidth: 218 });