css three column layout

Я пытаюсь настроить макет границы сверху, слева, в центре, справа, снизу. Я видел несколько примеров и пробовал их, но никто из них, похоже, не работает. Основная проблема заключается в левом, центральном и правом столбцах. Я могу получить только два divs, выровненных по горизонтали, третий всегда опускается ниже нижнего колонтитула. Мне нужно, чтобы это изменялось. Предпочтительно, чтобы центральная панель заполняла все до границ.css three column layout

Я попытался поплавать влево и поплавать вправо, но это не повлияло.

Это то, что я пробовал до сих пор. http://jsfiddle.net/xQVWs/2/

<body> 
<div class="top-wrapper"> 
    <div class="content-wrapper"> 
     <header> 
      header 
     </header> 
    </div> 
</div> 

<div class="mid-section"> 
    <div class="left-wrapper"> 
     Left Pane 
    </div> 
    <div class="main-content"> 
     Main pane 
    </div> 
    <div class="right-wrapper"> 
     right pane 
    </div> 
</div> 

<div class="bottom-wrapper"> 
    <div class="content-wrapper"> 
     footer 
    </div> 
</div> 

</body>

источник

2013-04-07 jheagle

Вы можете использовать float:left на первых двух средних колонн и float:right на третьем. Я бы поставил overflow:hidden на обертку для средних столбцов.

http://jsfiddle.net/zer6N/1/

.mid-section 
{ 
    background-color: blue; 
    width: 100%; 
    height:1000px; 
    overflow:hidden; 
} 

.left-wrapper, .right-wrapper { 
    background: #ffff00; 
    height: 100%; 
    min-height: 100%; 
    width: 21%; 
    display:block; 
    float:left; 
    margin:0; 
} 

.right-wrapper { 
    background:#efefef; 
    float:right; 
} 

.main-content { 
    background-color: black; 
    width: 58%; 
    height: 100%; 
    margin:0; 
    float:left; 
}

источник

2013-04-07 20:37:47 fletch

это гениально, я не думаю, что сделать два из них поплавка влево. Большое спасибо, действительно убрал это хорошо. Я весь день бил головой об этом. – jheagle

Рад, что я мог помочь. Удачи с вашим сайтом! – fletch

css three column layout

ответ

Смежные вопросы