Центр двух отдельных столбцов

Question

У меня есть два столбца, один из которых представляет собой сетку кладки jquery (динамический), а другой - отдельный столбец для твитов.

Я хочу, чтобы оба столбца оставались центрированными по мере изменения размера браузера. Я могу держать решетку кладки в центре, поскольку браузер растет/сокращается, однако моя колонка твитов остается слева, исправлена. Я предпочел бы, чтобы колонка твитов двигалась вместе с сеткой кладки.

Как я могу оставаться в центре?

<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; 
} 

Я надеюсь, что на этот раз он соответствует вашим требованиям. :)

Answer 2

У меня такая же настройка; вот основные сведения. Вероятно, он может использовать некоторую очистку, поскольку я основывал ее на шаблоне (который, как мне кажется, сейчас не может найти, извините!) Обратите внимание, что у меня были некоторые трудности с тем, чтобы боковая панель не растягивалась полностью; Я смог обойти это, поскольку он находится в фиксированной позиции на моей странице, но это может быть проблемой, если вы хотите, чтобы ваша панель навигации прокручивалась. Этот пример имеет боковую панель справа с масонством слева от него, но он может идти в любом случае. Если у вас есть боковая панель справа, вы можете изменить свою масонство, чтобы свернуть вправо, добавив «isRTL: true» после «itemSelector:« .post ».

HTML:

<center> 
<div class="main"> 
    <div id="fixed-left"></div> 
    <div id="fixed-sidebar"> Your tweets </div> 
    <div id="fixed-right"></div> 
    <div id="fluid"> 
     <div id="posts"> Masonry grid </div> 
    </div> 
</div> 
</center> 

CSS:

.main { 
    position: relative; 
    display: block; 
    width: 96%; 
    text-align: left; 
    margin: 0 auto; 
} 

#fixed-left { /*-- this div is probably unnecessary, I just keep it in case I want to add a column --*/ 
    float: left; 
    display: inline; 
    width: 0; 
} 

#fixed-sidebar { 
    float: right; /*-- float: left if you want your sidebar to the left --*/ 
    display: inline; 
    height: 100%; 
    width: 250px; 
} 

#fixed-right { /*-- this div is probably unnecessary, I just keep it in case I want to add a column --*/ 
    float: right; 
    display: inline; 
    width: 0; 
} 

#fluid { 
    float: none; 
    height: 100%; 
    width: auto; 
    margin-right: 250px; /*-- same value as fixed-sidebar width; use margin-left if you want your sidebar to the left --*/ 
} 

Надеется, что это помогает!