Wie kann ich diesen zentrierten Header mit mehreren Farben erstellen?

Question

Ich möchte den folgenden Header nachstellen:

Das Problem ist, dass der Inhalt im weißen Abschnitt zentriert ist. Grau ist der Hintergrund des Body und der Header hat eine Breite von 100% des Bildschirms.

Was ich jetzt habe, ist:

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

            LOGO    

        Mein Inhalt bla bla bla

Was Sie unter http://jsfiddle.net/gTnxX/ sehen können (ich habe die maximale Breite auf 600px anstelle von 1000px festgelegt, damit Sie es auf Fiddle sehen können).

Wie kann ich die linke Seite bei jeder Auflösung softblau und die rechte Seite hartblau machen?

Answer 1

Um dies zu tun, müssen Sie sich sehr bewusst sein, wie Positionierung funktioniert.

Der #header-bg ist positioniert, so dass er unterhalb des #wrapper liegt. Es ist 100% breit, 140px hoch mit 2 Divs, die jeweils 50% dieses Platzes einnehmen und beide eine andere Farbe für links/rechts erhalten.

Der #wrapper ist relativ positioniert, um z-index zu ermöglichen, damit er über dem #header-bg liegt. Die Breite ist auf 600px festgelegt und margin: 0 auto; zentriert sie.

Der #header ist ein einfaches Div mit einer festgelegten Höhe und dem benötigten Hintergrund.

Der Inhalt folgt dem #header im normalen Fluss.

Hier ist ein jsfiddle mit dem gewünschten Verhalten.

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

Dies degradiert sogar gut und ermöglicht ein horizontales Scrollen, falls der Inhalt größer ist als der Bildschirm (etwas, das mir beim ursprünglichen jsfiddle aufgefallen ist).

Bearbeiten:

Um es mit IE7 kompatibel zu machen, habe ich einige Änderungen vorgenommen, um 2 Fehler zu beheben. Ich musste left: 0; und top: 0; ausdrücklich zu #header-bg hinzufügen, um einen Positionierungsfehler zu beheben. Die Divs innerhalb von #header-bg habe ich auf 49% geändert, anstelle von 50%, da IE7 sie sonst nicht ordnungsgemäß neu dimensionieren würde und das rechte Div nach unten schieben würde. Um den kleinen Spalt auszugleichen, den das erzeugt hat, habe ich das rechte Div float: right; gemacht.