Uschi Renziehausen: Überprüfung: Boxmodell

Beitrag lesen

Moin Adrian,

dann nehmen wir doch mal das von die von dir als Vorlage benutzte CSS aus Self unter die Lupe:

Die linke Navigationsleiste ist 18em breit und hat einen linken Umfluss:

ul#Navigation {float: left;}

Die rechte Infobox floatet rechts und soll 12em breit sein.

div#Info {float: right; width: 12em;}

Wenn eine der beiden Seitenboxen noch irgendwelche seitlichen margins oder paddings hat, musst du die mit einkalkulieren.

Wenn du dir nun das Inhalts-Div anguckst, hat dieses bezüglich der Aussenabstände folgende Angaben:
div#Inhalt {margin: 0 12em 1em 16em;}
Ausgeschrieben wäre das:
margin-top: 0px;
margin-right: 12em;
margin-bottom: 1em;
margin-left: 16em;

Vom linken und rechten Rand hält sich die Inhaltsbox also ungefähr genau so weit entfernt, wie die jeweiligen Außenboxen breit sind (für den linken Rand 16 em statt 18em, weil die Schriftgröße für die Navibox via font-size: 0.83em; herabgesetzt ist, und ein in der linken Box kleiner ist als für die übrigen). Diesen margin-Angaben ist es zu verdanken, dass die Inhaltsbox die  Außenboxen nicht überdeckt.

Dass dein div#content die Außenblöcke überlagert, liegt an deinen margin-Angaben dort: Du sagst explizit, dass margin-left und margin-right 0px sein sollen. Der Bezugsrahmen dafür ist dein div#Page!

Die Breite deiner Außenboxen legst du in ul.navi auf 200px fest. Dazu kommen  für ul#leftnavi noch 10px Rand nach rechts, für ul#rightnavi 10px Rand nach links. Daraus ergibt sich für div#content.

div#content {
  margin: 0px 210px 0px 210px:
  ... die übrigen Angaben
}

Frag nach, wenn du es nicht verstanden hast.

Schönes Restwochenende, Uschi