jQuery-UI's Sortable function moves div unnecessarily -

I have been working with jquery-ui's serial demo for some time.

Seeing closely, I came to know that it bends Divas a bit.

Here's an online demo:

Try to move the center to the left, then you can see the right people except 2 pixels on the right.

I would like to know why this is messing up all my functionality.

PS: If JSN codes do not appear, then this is:

   & Lt; Title & gt; JQuery UI Sourceable - Portlets & lt; / Title & gt; & Lt; Link rel = "stylesheet" type = "text / css" href = "css / ui-dark / jquery-ui-1.8.2.custom.css" /> & Lt; Script type = "text / javascript" src = "lib / jquery-1.4.2.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "lib / jquery-ui-1.8.2.custom.min.js" & gt; & Lt; / Script & gt; & Lt; Style type = "text / css" & gt; Container {width: 788 pixels; Height: 405px; } .column {width: 78px; Height: 405px; Exhibit: Table Cell; Vertical-line: bottom;}. Portlet {width: 78px; Height: 10px; Display area; Status: Relative; } & Lt; / Style & gt; & Lt; Script type = "text / javascript" & gt; $ (Function () "$" (". Column"). Sortable ({connectWith: '.column', helper: 'original'}); $ (". Portlet") AddClass ("ui-widget ui-widget - content ui-corner-all "); $ (" .column "). DisableSelection ();}); & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "container" class = "container" & gt; & Lt; Div id = "col-0" class = "column" & gt; & Lt; Div class = "portlet" id = "feeds" & gt; & Lt; Div class = "portlet-content" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "portlet" id = "news" & gt; & Lt; Div class = "portlet-content" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "col-1" class = "column" & gt; & Lt; Div class = "portlet" id = "shopping" & gt; & Lt; Div class = "portlet-content" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "col-2" class = "column" & gt; & Lt; Div class = "portlet" id = "link" & gt; & Lt; Div class = "portlet-content" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "portlet" id = "picture" & gt; & Lt; Div class = "portlet-content" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt; The reason for this is actually very simple (although I can not believe that it is actually that) it is actually very simple (although I can not believe it is actually.)  

Reason until I see your CSS).

When you add the ui-widget class to those div , then you are also adding 1px wide border to those div < /x> In addition to addition of , a pixel takes up to 78px, which you define as its width, thus their actual width is 80px

of the fact Combined with that, you have specified a 78px width for the column, that means the columns are too narrow for their content Car 78px when returns from the column 80px last element is removed.

I had to modify you to work with jQuery and jQuery UI, so CSS is not the same as the one you use, thus I could be wrong about the column width Changed to 80px, the columns were stopped from transferring.