Как заставить divs заполнить оставшееся пространство?

Question

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

http://s7.postimg.org/6wkq6376j/Question.jpg

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

Как я могу заполнить оставшееся пространство, чтобы оно выглядело так, как моя панель навигации составляет 100% ширины?

* (я попробовал 100%, а кнопки панели навигации стали слишком большими).

Answer 1

Если я вас правильно понимаю ... 1) Поместите их каждый (баннер и навигатор) в обертку div, полную ширину. 2) Затем дайте баннеру и наведите на них ширину набора и «margin: 0 auto;» плавать в центре. 3) Затем вы можете установить изображение BG на переносе навигатора в соответствии с навигационной панелью, поэтому оно распространяется полностью, но nav остается фиксированной и центрируется.

Что-то, как показано ниже, здесь скрипку, чтобы видеть это легко: http://jsfiddle.net/s_Oaten/GTDBX/

HTML

<div class="header_wrap"> 
    <div class="banner"></div> 
    <div class="nav_wrap"> 
    <div class="nav"> 
     <ul><li>Link</li><li>Link</li><li>Link</li><li>Link</li><li>Link</li></ul> 
    </div> 
    </div> 

CSS

.header_wrap { 
    height: 110px; 
    margin: o auto; 
    background: #0000dd; 
} 
.nav_wrap { 
    height: 80px; 
    margin: o auto; 
    background: #707070; 
} 
.banner { 
    height:110px; 
    background: blue; 
    margin: 0 auto; 
    width: 600px; 
} 
.nav { 
    height: 80px; 
    background: grey; 
    margin: 0 auto; 
    width: 600px; 
} 
ul {margin: 0; padding: 0;} 
.nav li { 
    display: block; 
    float: left; 
    width: 20%; 
    list-style: none; 
    text-align: center; 
}