Isotope - fitColumns in fit container

Re http://stackoverflow.com/questions/5100009/relayout-items-with-isotope-doesnt-seem-to-maintain-structure

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

CSS

body{padding:20px;margin:0;font-size:18px;color:#fff;}
.item{width:100px;height:100px;margin:10px;background:red;}
.item.selected{width: 220px;height:100px;background:green;}

JavaScript

$(function() {
    var $container = $('#container'),
        $items = $('.item'),
        isRedFiltered = false;

    $container.imagesLoaded(function() {
        $container.isotope({
            itemSelector: '.item',
            masonry: {columnWidth: 60},
            sortBy: 'order'
        })
    });

    $items.click(function() {
        var $this = $(this);
        var $previousSelected = $('.selected');
        if (!$this.hasClass('selected')){
            $this.addClass('selected')  
        }

        $previousSelected.removeClass('selected');

        $container
            .isotope('updateSortData', $this)
            .isotope('updateSortData', $previousSelected)
            .isotope()
    })
});