How make divs fill remaining space?

Question

i know there is similar questions, but i couldnt find exactly what to do. Here is an image showing what i would like to do.

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

could 3 divs in a container div be a good option ? I would like to keep the banner and navigation bar in the center with the same size as shown.

How can i fill the remaining space so it looks like my navigation bar is 100% width ?

*(i tried 100%, and the navigation bar's buttons become too big).

Answer 1

If I understand you correctly.. 1) Put them each (banner and nav) in a wrapper div that's full width. 2) Then give the banner and nav themselves a set width and "margin: 0 auto;" to float it in the center. 3) You can then set a BG image on the nav wrap to match the navbar, so it extends all the way, but the nav stays a fixed width, and centered.

Something like below, here is a fiddle to see it more easily: 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;
}