dreispaltiges Layout

Zusätzlich neben Navigation und Inhalt kommt noch eine dritte Spalte. Hier der Infokasten.

3-spaltiges Layout in CSS

Die 3. Spalte wird über float:right; auf der rechten Seite ausgerichtet. Zusätzlich werden bei der mittleren Spalte, die entsprechenden Abstände zum Rand definiert:
margin: 0 10em 0 13em;

Dabei steht:

• die 1. Angabe von 0 für den oberen Abstand von 0 Pixel
• die 2. Angabe von 10em für den Abstand nach rechts, was für den Infokasten benötigt wird
• die 3. Angabe von 0 für den Abstand nach unten von 0 Pixel
• die 4. Angabe von 13em für den Abstand nach links, was für die Navigation benötigt wird.

Als fertiger Code sieht es wie folgt aus:

<style>
#seitenbereich {
  margin: 0 auto;    /* Zentrierung mitte */
  width: 780px;
  background-color: silver;
}

#navi {
  float: left;
  width: 13em;
  background-color: thistle;
}

#inhalte {
  margin: 0 10em 0 13em;
  background-color: lightblue;
}

#infokasten {
  float: right;
  width: 10em;
  background-color: yellowgreen;
}
</style>

<div id="seitenbereich">

  <div id="navi">
    <ul>
      <li>Startseite</li>
      <li>Impressum</li>
    </ul>
  </div>

  <div id="infokasten">
    Auf dieser Seite bekommen Sie Informationen zu ...
  </div>

  <div id="inhalte">
    Hier HTML und CSS lernen und die
    eigene Website erstellen - selbst ist der Mensch
  </div>

</div>