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

I'm trying to create a WordPress style for the project site that I'm working on. I am an experience designer, but there is a concept that I do not understand. I want to be able to set the width of the site at 960px, but there are twice on the top You can see what I mean in the picture below.

I really want to be able to use the blue bar as a menu system and all the contents main 960px width The logo image needs to start with the beginning of content beginning (where 960px starts). The image is just a ridicule, but I want my users to see it. I want the whole site to be able to look at the monitor of any size evenly.

I am trying to come up with a solution to do this whole day effectively, but I have not been able to think anything about anything.

Do anyone have any ideas for me? Is there something that will work in all browsers?

You will have to make a relative container, and inside it in the full container, something like this:

  & lt; Div id = "header_struct" & gt; & Lt; Div id = "green_area" & gt; {Logo floats right here or some object} & lt; / Div & gt; & Lt; Div id = "blue_area" & gt; {Menu structure goes here, float is left or anything else} & lt; / Div & gt; & Lt; / Div & gt;   
  Your style:   
  #header_struct {status: relative; Width: 960px; } # Green_rea {status: absolute; Correct: 700px; // It starts 260px with the left side width: 1000px; // leaves it in the background color from the left side of the screen: green; } #blue_rea {condition: full; Left: 260px; // It starts 260px with the left side width: 1000px; // leaves it in the background color from the left side of the screen: blue; }   
 Actually you need nested amboseless positioning device inside the relative container. #header_struct I have not tested this, but I remember that something like this is. I hope you will get started.  
 Here JSFIDL has been cleaned: