StackOverflow: jQuery UI sortable on dynamic width table possible?

http://stackoverflow.com/questions/6376017/jquery-ui-sortable-on-dynamic-width-table-possible/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<div id='bars' class='clearfix'>
    <div class="bar">1</div>
    <div class="bar">2</div>
    <div class="bar">3</div>
    <div class="bar">4</div>
    <div class="bar">5</div>
    <div class="bar">6</div>
</div>

CSS

#bars {
    width:100%;
    border:1px solid;
}
#bars .bar {
    height:45px;
    width:120px;
    border: 1px solid #c2c2c2;
    float:left;
}


/* CSS clearfix */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1%;
}

JavaScript

(function($) {
    var $bars = $('#bars').sortable();
    var $bar = $bars.find('.bar');
    var barCount = $bar.length;
    var marginLeft = ($bars.width() - (barCount*$bar.first().outerWidth()))/(barCount>1?barCount-1:barCount);
    $bar.each(function(i){
        //don't apply to first element
        if(i>0) {
            $(this).css('marginLeft',marginLeft);
        }
    });
    
    console.log($bars.outerWidth(true));
    console.log(marginLeft);
}(jQuery));