Begnadete Körper: body zentriert und mit fester Breite

html und body statt #wrapper, #container & Co.

In meinen Gedanken - und ich denke auch in den Gedanken der meisten Webdesigner - fängt das HTML der zu gestaltenden Webseite mit dem Element body an:

• html ist das unsichtbare Stammelement.
• body ist der Bereich des sichtbaren Browserfensters, der Bereich in dem gestaltet wird.

Innerhalb von body folgt dann bei vielen CSS-Layouts ein div-container um alle zu gestaltenden Elemente, der zwar so schöne Namen wie #container, #wrapper oder #page hat, aber semantisch eher überflüssig ist.

In Transcending CSS von Andy Clarke habe ich nun folgende simple CSS-Anweisung gesehen:

body {
  width: 770px;
  margin: 10px auto;
}

Ich dachte unwillkürlich "Häh? body zentriert und mit einer festen Breite? Wie soll das denn gehen? Welche Hintergrundfarbe kommt dann jenseits des padding? Die von html?"

Wenn das mit der Breite und der Zentrierung für body klappt, wäre der allumfassende div-Container nicht nur semantisch sondern komplett überflüssig.

Schritt 01: Die Ausgangsposition

Nun denn. Ausgangsposition ist eine relativ simple HTML Seite mit einigen grundlegenden Stylings. Wichtig für das Experiment ist dabei lediglich die Hintergrundfarbe fü:r body, die das gesamte sichtbare Browserfenster ausfüllt:

body {
  background-color: #EFE79A;
}

Weiter zu Schritt 02