Search code examples
htmlcsspositionpositioning

How can I create this centered header with multiple colors?

I want to recreate the following header:

The problem is that the content is centered in the white section. Grey is the background of body and the header is 100% of screen.

What I have now is:

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>​​​​​​

Which you can see working on http://jsfiddle.net/gTnxX/ (I put max width 600px instead of 1000px so you can see it on fiddle).

How can I make the left side soft blue and right side hard blue at any resolution?

Solution

  • To do this you need to be very aware of how positioning works.

    The #header-bg is positioned so it falls below #wrapper. It is 100% width, 140px high with 2 divs which both take up 50% of that space and they both get a different colour for left/right.

    The #wrapper is relatively positioned to make z-index work, putting it above the #header-bg. Width is set at 600px, and margin: 0 auto; centers it.

    The #header is a simple div which has a height set to it and the background it requires.

    Content follows the #header in normal flow.

    Here is a jsfiddle with the requested behaviour.

    http://jsfiddle.net/sg3s/cRZxN/

    This even degrades nicely and lets you scroll horizontally if the content is larger than the screen (something I noticed from the original jsfiddle).

    Edit:

    To make it IE7 compatible I made some changes to fix 2 bugs. I had to add left: 0; and top: 0; explicitly to #header-bg to fix a positioning bug. Made the divs inside #header-bg 49% instead of 50% or else IE7 would not resize them properly and make the right div bump down. To compensate for the small gap that created I made the right div float: right;.