html - Using DIV instead of TABLE but DIV width does not fill available space

Question

<div style="width:100%;">
<div style="background-image:url('../images/navi/top-red.png'); float:left;"></div>
<div style="width:180px; float:left;"><img src="/images/navi/logo.jpg" style="width:178px; height:62px; float:right; border:0;" /></a></div>
<div style="width:800px; float:left; background-image:url('../images/navi/top-black.png');"><ul id="topnav" style="">NAVI LINKS</ul></div>
<div style="background-image:url('../images/navi/top-black.png');float:left;"></div>
</div>

What I want to achieve is... the width:180px and width:800px= 980px is centered on browser all the time
the left and right have no content (only background gradient image with FLUID width):

--------------------------------- width: 100% browser -----------------------------

|top-red.png FLUID | width:180px-LOGO.jpg | width:800px-NAVI LINKS | top-black.png FLUID|

--------------------------------- width: 100% browser -----------------------------

I am trying to build a full width 100% top navi menu for my website.

• center content is fixed 980px
• center content consists of a) logo image and b) navi links
• left space is filled with top-red.png as background-image
• right space is filled with top-black.png as background-image

I been trying to use 3 and 4 DIVs (4 divs if logo and navi each 1 DIV) to construct but the 1st left-most div WIDTH does not fill up all available space and the background-image only spawn a little bit.
Eg. If I type a string of words in the DIV, the background-image will extend ONLY to the length of the string of words.

I gave up and eventually succeeded using TABLE tag (see below)
The '1st TD' will auto fill all avail WIDTH touching to the '2nd TD'
Can see this:

..but I still hope someone here can enlighten me on how to do it using DIV tag though!

<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
  <tr>
    <td style="background-image:url('../images/navi/top-red.png'); height:62px;">&nbsp;</td>
    <td style="height:62px; width:180px; padding-right:10px;"><a href="/"><img src="/images/navi/logo.jpg" alt="LOGO IMAGE" style="width:178px; height:62px; border:0;" /></a></td>
    <td style="height:62px; width:800px; background-image:url('../images/navi/top-black.png')">NAVI MENU</td>
    <td style="background-image:url('../images/navi/top-black.png'); height:62px;">&nbsp;</td>
  </tr>
</table>

Answer 1

Ok so here's my attempt, I used a .container element for the 980px centered part and then I used the :before and :after pseudo-elements to create the fluid parts and positioned them absolutely. Also I used CSS3 gradients instead of background images (I omitted the gradient code here in the answer to save space)

Demo fiddle

HTML

<header>
    <div class="container">
        <div class="navbar"> 
            <a href="#" id="brand">
                <img id="logo" src ="http://placehold.it/180x50"/>
            </a>
            <ul class="nav">
                <li><a href="#">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
                <li><a href="#">Menu 3</a></li>
                <li><a href="#">Menu 4</a></li>
            </ul>
        </div>
    </div>
</header>

CSS

body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}
.container {
    width: 980px;
    margin: 0 auto;
    height: 62px;
    position: relative;
}
.container:before, .container:after {
    content:'';
    display: block;
    position: absolute;
    width: 9999px; /* a large number to fill remaining space*/
    height: 62px;
    top: 0;
}
.container:after {
    left: 100%;
    background-color: #000000;
    /* + black gradient background*/
}
.container:before {
    right: 100%;
    background-color: #AF0B00;
    /* + red gradient background*/
}
#brand {
    height: 100%;
    line-height: 62px;
    float: left;
    font-size: 0;
    width: 180px;
    text-align: center;
    padding-right: 10px;
    vertical-align: top;
    right: 100%;
    background-color: #AF0B00;
    /* + red gradient background*/
}
#logo {
    vertical-align: middle;
}
.navbar .nav:before {
    display: inline-block;
    content:'';
    height: 62px;
    width: 10px;
    background: #fff;
}
.navbar .nav {
    list-style:none;
    padding: 0;
    margin: 0;
    float: left;
    width: 790px;/*800-10 of logo padding*/
    height: 62px;
    background-color: #000000;
    /* + black gradient background*/
}
.navbar .nav li {
    list-style:none;
    display: inline-block;
    line-height: 62px;
    vertical-align: top;
}
.navbar .nav li a {
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 12px;
    padding: 0 18px;
}