Плавающие ячейки и сетевая система

Question

Я действительно надеюсь, что вы можете мне помочь. Я пытаюсь создать сетку, подобную той, что есть в pinterest, но мне также нужна боковая панель с левой стороны. Так что мне нужно 2 DIV долетел бок о бок, и один, содержащий ячейки сетки, необходимо настроить его ширина, чтобы разместить разрешение браузера - Вид, как это:

[ Sidebar ] [ [Cell][Cell][Cell][Cell][Cell][Cell] ] 
       [ [Cell][Cell][Cell][Cell]    ] 


[ Sidebar ] [ [Cell][Cell][Cell] ] 
       [ [Cell][Cell][Cell] ] 
       [ [Cell][Cell][Cell] ] 
       [ [Cell]    ] 

В момент когда DIV, содержащий Когда я настраиваю размер браузера, ячейки попадают под боковую панель. Есть ли способ настроить его автоматически? Спасибо

Answer 1

Это должно заставить вас начать. Он использует display:table, чтобы выполнить эту работу.

div { 
    display: table; 
} 
section { 
    display:table-cell 
} 
.one { 
    width:150px; 
    vertical-align:top; 
} 
.box { 
    height:100px; 
    width:100px; 
    float:left; 
    background-color:blue; 
    margin:5px; 
} 

<div> 
    <section class="one"> 
     <p>sidebar</p> 
    </section> 
    <section class="grid"> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
    </section> 
</div> 

http://jsfiddle.net/mJhGM/

Answer 2

Вы могли бы сделать что-то вроде этого: колонка Example

Sidebar плавал слева, и основная колонка контента плавал налево.

<div id="wrapper"> 

<div id="left">sidebar</div> 
<div id="right"> 


    <ul> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 

</div>