jquery - 将两个单独的列居中

Question

我有两列，一列是 jquery masonry 网格(动态)，另一列是推文的单独列。

我希望两列在浏览器调整大小时保持居中。随着浏览器的增大/缩小，我能够让砖石网格保持居中，但是，我的推文列固定在左侧。我宁愿推文栏沿着砖石网格移动。

我怎样才能让两者都居中？

<div id='homepagecontainer' style="float:right; width:100%; margin-left:-280px;">

<div id="tweetaside" style="float:left; margin-left:10px;margin-top:-10px;width:260px;">
  <div style="width:250px;">
     Long list of Tweets!!
  </div>
</div>

<div id="masonrygrid" style="margin-left:280px;">
  <div id="homepagescroll" style="margin: 0 auto;">
      <center>
         Masonry Grid Data
      </center>  
    </div>
  </div>
</div>

</div>

Answer 1

已更新

改编在另一篇文章中找到的答案:

http://jsfiddle.net/jZEvL/

HTML

<div id="hideoverflow">
    <div id="wrapper">
        <div id="inner">
           <div id="left">
               <p>Blah blah blah</p>
           </div>
           <div id="right">
               <p>Blah blah blah blah blah blah blah</p>
           </div>
        </div>
    </div>
</div>

CSS

#outer 
{ 
    overflow: hidden; 
}

#wrapper
{
    position:relative; 
    left:50%; 
    float:left;
}

#inner
{
    position:relative; 
    left:-50%; 
    float:left;
}

#left,
#right
{
    display:inline-table;
    height:200px;
}

#left
{
    margin-right:10px;     
    background-color:red;
}

#right
{
    margin:0;     
    background-color:blue;
}

希望这次能满足您的要求。 :)