I am looking to replicate this particular header design:
The issue I am facing is that the content is centered within the white section. The background of the body is grey and the header spans 100% of the screen.
Here is my current code:
CSS
.top_left {
background:#3c4d74;
}
.top_right {
background:#2f3a5a;
}
.top_center {
background:#3c4d74 url(http://img85.imageshack.us/img85/2816/headerbgo.jpg) no-repeat right top;
height:140px;
}
#page,
.top_center {
max-width:1000px;
margin:0 auto;
}
#page {
background:#FFF;
}
body {
background:#DEDEDE;
}
HTML
<body>
<div id="top-header">
<div class="top_left"></div>
<div class="top_center">
<a href="#">LOGO</a>
</div>
<div class="top_right"></div>
</div>
<div id="page" class="hfeed">
MY content bla bla bla
</div>
</body>
You can view the working example on http://jsfiddle.net/gTnxX/ (I changed the max width to 600px for display purposes).
How can I make the left side a soft blue and the right side a hard blue regardless of resolution?