Как я могу нажать div внутри глубинного «отзывчивого флюида» вправо?

Question

Я использую глубокую структуру сетки для создания гибкой сетки флюида. В основном я хочу создать макет, содержащий 6 колонок, из которых контейнер меню находится слева с 1 шириной столбца, а содержимое справа - с шириной 5 колонок. Внутри содержимого у меня есть вложенная сетка, которая также является жидкой.

У меня есть сетка работает как реагировать, например жидкости, которую можно найти здесь: http://www.profoundgrid.com/examples/fluidresponsive.html

код СКС меня выглядит следующим образом:

#row{ 
    div{@include column(6);} 
    .col1{@include column(2);} 
    .col5{@include column(10);} 
    @include generate_grid_positions(div, 1); 
} 

HTML, выглядит следующим образом:

<article id="row"> 
     <div id="menuContainer" class="col1">Menu <br />menu <br />menu</div> 
     <div id="contentContainer" class="col5"> 
      <div id="projectContainer"> 
       <div class="project">project1</div> 
       <div class="project">project2</div> 
       <div class="project">project3</div> 
       <div class="project">project1</div> 
       <div class="project">project2</div> 
       <div class="project">project3</div> 
      </div> 
      <div id="socialContainer">sadfgsdfg</div> 
     </div> 
    </article> 

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

Answer 1

Как это:

<article class="grid1"> 
    <div class="col2 push0">menu</div> 
    <div class="col2 push2">c1</div> 
    <div class="col2 push4">c2</div> 
    <div class="col2 push6">c3</div> 
    <div class="col2 push8">c4</div> 
    <div class="col2 push10">c5</div> 
</article> 

объединить 5 правые колонки:

<article class="grid1"> 
    <div class="col2 push0">menu</div> 
    <div class="col10 push2">5 times width</div> 
</article> 

И чтобы убедиться, вы узнаете не так много (becoz это копия вставленный из вашей ссылке OP), ваше решение:

<article> 
    <div class="col3">left</div> 
    <div class="col9 push3">right</div> 
</article>