Create a 960px style with two solid bars that are 100% of page width?

I am trying to create a wordpress style for a project site I am working on. I am an experience designer, but there is a concept that I can't figure out. I'd like to be able 开发者_如何学Cto have the width of the site set at 960px, but have two bars at the top. You can see what I mean in the picture below.

http://i.stack.imgur.com/pSShB.png

I really want to be able to use the blue bar as a menu system and keep all the content within the main 960px overall width. The logo image, needs to start at the very beginning of the content beginning(where the 960px starts). The image is just a mock up, but that's how I want my users to be able to see it. I want the whole site to be able to scale to look the same on any sized monitor.

I have been trying to come up with a solution to do this effectively all day, but haven't managed to think of anything.

Does anyone have an ideas for me? Something that'll work in all browsers?

You would have to create a relative container, and inside of in absolute containers, something like this:

<div id="header_struct">
 <div id="green_area">{logo goes here float it right or something}</div>
 <div id="blue_area">{menu structure goes here, float left or something}</div>
</div>

Your Style:

#header_struct{
 position: relative;
 width: 960px;
}
#green_area{
 position: absolute;
 right: 700px; // makes it start 260px in from the left side
 width: 1000px; // makes it go off the left side of the screen for instance
 background-color: green;
}
#blue_area {
 position: absolute;
 left: 260px; // makes it start 260px in from the left side
 width: 1000px; // makes it go off the left side of the screen for instance
 background-color: blue;
}

Basically you need nested abosolute positioning divs inside the relative container #header_struct. I haven't tested this, but I recall doing something similar. I hope that gets you started.

Here is a cleaned up JSFIDDLE of it working: http://jsfiddle.net/37Fmh/

something like this should get you started.

http://jsfiddle.net/pxfunc/DxW47/1/

css:

body {background:#eee url('http://files.me.com/pwb3/lo1t09') repeat 0 0;margin:0;padding:0;}

#greenBg {background:#00cb00;height:50px;width:50%;top:40px;right:50%;position:absolute;}
#blueBg {background:#00b8de;height:50px;width:50%;top:40px;left:50%;position:absolute;}

.clear {clear:both;}

#container {width:960px;margin:40px auto 0 auto;position:relative;}
#header {background-color:#00cb00;width:220px;float:left;padding:15px;}
#nav {background-color:#00b8de;width:678px;border-left:solid 2px #fff;float:left;padding:15px;}

#content {margin-top:10px;border:solid 1px #ddd;background-color:#fff;padding:15px;height:400px;}

html:

<div id="greenBg"></div>
<div id="blueBg"></div>

<div id="container">
    <div id="header">
        <span>site logo</span>
    </div>
    <div id="nav">nav</div>
    <br class="clear" />
    <div id="content">content</div>
</div>