如何根据窗口宽度居中列

<link rel="stylesheet" type="text/css" href="reset.css" />      
<style type="text/css">
        body { position: relative; }
        .contain { position:relative; overflow: hidden; width: 80%; height: 100%; margin: 0 auto; }     
        .box {
            background-color: #F0F0F0;
            color: #888;
            font-family: Arial, Tahoma, serif;
            font-size: 13px; }
        .box p { padding: 10px; }
        .box span {
            float: left;
            font-size: 26px;    
            font-weight: bold;  }
        div.alt { background-color: #CCC; }
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    var myFluidGrid = {
            COLNUMBER : 2, // Minimum column number.
            COLMARGIN : 10, // Margin (in pixel) between columns/boxes.
            COLWIDTH : 240, // Fixed width of all columns.
            doLayout : function() {
                var self = this;
                var pointer = 0;
                var arr = [];
                var columns = Math.max(this.COLNUMBER, parseInt($('body').innerWidth() / (this.COLWIDTH + this.COLMARGIN)));
                $('.box').css('position', 'absolute').css('width', this.COLWIDTH  + 'px');
                $('.box').each(function() {
                    var tempLeft = (pointer * (self.COLWIDTH + self.COLMARGIN));
                    $(this).css('left', tempLeft + 'px');
                    var tempTop = 0;
                    if (arr[pointer]) { tempTop = arr[pointer]; }
                    $(this).css('top', tempTop + 'px');
                    arr[pointer] = tempTop + $(this).outerHeight() + self.COLMARGIN;
                    pointer++;
                    if (pointer === columns) { pointer = 0; }
                });
            }
        };
        $(window).ready(function() {
            myFluidGrid.doLayout();
        }).resize(function() {
            myFluidGrid.doLayout();
        });
    </script>
<div class="contain">    
    <div class="box">This is box number 1...</div> 
    <div class="box">This is box number 2...</div>
    <div class="box">This is box number 3...</div>
</div>

当前代码的演示:http://grahamthomas.me/temp/test.html

试图让上面的网格保持在窗口的中心，无论它的大小。我目前有它大致居中，但当窗口大小调整，居中变得不真实，直到新列填充内容(即，当动态网格在列之间-大于3列，但不完全4)。

我不擅长JS，但我的逻辑是:

• 创建一个100%的包装器(模仿body.innerWidth)(JS中的维度)
• 在这个(例如80%)里面创建一个居中的包装器
• 将内容放在居中的包装器
• 一旦100%包装器足够大，可以处理一个额外的列，在居中的包装器
中添加新的div

你可以清楚地看到溢出:隐藏属性'run over'当拖动窗口变小时最右边的框。我从这里假设，窗口宽度没有被正确计算。我尝试了var列的变体，如:

var columns = Math.max(this.COLNUMBER, parseInt(($('body').innerWidth() * 0.8)/ (this.COLWIDTH + this.COLMARGIN)));

. .这使得列保持在窗口内，但仍然不是一个合适的中心。

我已经看了一段时间了，有人有什么想法吗?

谢谢