Different color background in same div - html

Question

I feel like this should be much easier than I am making it...I'm looking for a solution to have 1 solid color extend from the left and end at a logo, then have a second solid color extend all the way to the right. I want the wrapper divs to extend 100%. So something like:
<div id="header-wrap"><!--100% page width-->
<div id="header"><!--1000px centered fixed width-->
<div id="logo"></div><!-- align left-->
<div id="nav"></div><!-- align right-->
</div>
<div id="sub-header-wrap">
...
</div>
</div>
Here's an image showing what I mean:

Answer 1

There is a lot that goes into this.
Let me start of with a link to a working fiddle: JSFiddle
How can I explain this?
Basically I have the two full-width divs that have the full background color. Inside those two divs I have a div classified as .inner that has 80% of the width (which can be whatever you want) that is aligned to the center with margins.
Inside .inner I have a left div and a right div of the proper sizes to contain the logo/navigation. Inside the left divs, I have another div, .shade that will darken the left side of the header.
The .left divs are relatively positioned and the .shade divs are absolutely positioned.
CSS:
body{
margin: 0;
}
header
{
display:block;
width: 100%;
}
header .top
{
background: #00a;
text-align: center;
color: white;
}
header .inner
{
width: 80%;
margin: 0 10%;
text-align: left;
}
header .inner .logo, header .inner .left
{
display: inline-block;
width: 20%;
margin: 0;
text-align: center;
height: 100%;
padding: 10px 0px;
position: relative;
z-index: 1;
}
header .inner .right
{
display: inline-block;
width: 78%;
margin: 0;
text-align: right;
}
header li
{
display: inline-block;
list-style: none;
}
header .bottom
{
background: #ca0;
}
header .shade
{
width: 1000%;
height: 100%;
position: absolute;
top: 0px;
right: 0px;
background: rgba(0, 0, 0, .3);
z-index: -1;
}
HTML:
<header>
<div class="top" align="center">
<div class="inner">
<div class="logo">
Logo
<div class="shade"></div>
</div>
<div class="right">
<li>Nav 1</li>
<li>Nav 2</li>
</div>
</div>
</div>
<div class="bottom">
<div class="inner">
<div class="left">
Subtext
<div class="shade"></div>
</div>
<div class="right">
<li>Link</li>
</div>
</div>
</div>
</header>
Full JSFiddle

Answer 2

If I understand you correctly, try something like this in a separate CSS file, or within a <style> block. It's not tested though, sorry.
#header {
margin: 0 auto; /* for centering */
width: 1000px;
}
#logo {
float: left;
width: 250px; /* for example */
background-color: red; /* for example */
}
#nav {
float: right;
width: 750px; /* for example */
background-color: blue; /* for example */
}
UPDATE:
If you can afford CSS3, this post can be intresting for you as well.