Es ist verhältnismäßig einfach, den Content an die richtige Position zu bekommen und zu verhindern, dass die Inhalte unter der Sidebar umbrechen. Wir gehen in zwei Schritten vor:

• Zunächst setzen wir den rechten Margin-Bereich so, dass der Content genau an die Sidebar anschließt. Für alle anderen Seiten setzen wir margin auf 0.
• Anschließend deklarieren wir die inneren Abstände über die Eigenschaft padding. Dabei brauchen wir uns nur um die horizontalen Abstände zu kümmern; die vertikalen Abstände sind 0.

/**
* @section Content
*/
div#content {
  margin: 0 0 0 288px;
  padding: 0 12px 0 36px;
}

Natürlich hätten wir einfach margin: 0 12px 0 324px; schreiben können, jedoch finde ich es sauberer, zunächst ein lückenloses Spaltenlayout zu formulieren und zusätzliche Abstände über weitere Deklarationen zu realisieren.

Nun fehlen noch zwei Formatierungen für die Inhalte: Den oberen Margin-Bereich der Hauptüberschrift setzen wir auf 0, damit sie direkt an der oberen Kante des Contents beginnt. Und wir sorgen dafür, dass das Gemüse floatiert. Es ist das einzige img-Element im Content (und zwar derzeit auf allen Seiten), daher können wir ganz unkompliziert vorgehen und einfach alle Grafiken innerhalb von #content floatieren.

#content h1 { margin-top: 0; }
    
#content img {
  float: left;
  margin: .5em .5em .5em 0;
}

Abb. 8.32: Schritt 11

Den Abschluss jeder Seite bildet die Fußzeile, um die wir uns als Nächstes kümmern.