砌体 - 对齐固定和流畅的布局

Question

我有一个固定宽度的div 600px对齐左边包含文本，而div的右边是空的。我想要做的是通过使用砌体布局来填充空间和剩余的页面空间。

我创建了一个jsfidlle，它显示了它的外观：http://jsfiddle.net/jason99/u6LmP/7/

HTML

<div class="container">
    <div class="content">
        <p>Lorem Ipsum...</p>
    </div>

    <div class="listing">
        <div class="item h2"></div>
        <div class="item h1"></div>
        ....
    </div>
</div>

CSS

.container {
    width: 910px;
    margin: 0 auto;
}
.content {
    width: 597px;
    background-color: #e5e5e5;
    color: #000;
    padding: 10px;
    margin-right: 3px;
    float: left;
}
.listing {
    position: relative;
    float: left;
}
.item {
    width: 300px;
    float: left;
}
.h1 {
    background-color: #0066ee;
    height: 400px;
}

的Javascript

docReady(function () {
    var $container = $('.listing');
    $container.isotope({
        itemSelector: '.item',
        layoutMode: 'masonry',
        masonry: {
            columnWidth: 300,
            gutter: 3
        }
    });
});

我想显示如下图所示的布局：

注意：我使用的是同位素库。