Drei Bereiche
Wenn du dir die anderen Beispiele angesehen hast, dann dürfte mehrspaltiges Layout kein Problem mehr für dich sein. Dieses Beispiel teilt sich in drei Bereiche auf: Die Titelleiste, das Menü und der InhaltDie Titelleiste
Für die Titelleiste habe ich einen <div>-Container verwendet, da der gesamte Bereich mit einem unteren Rahmen versehen werden soll und es mit zwei nebeneinander floatenden Elementen nicht immer möglich ist einen lückenlosen Rahmen zu erzeugen.Das Logo und das <h1>-Tag floaten nebeneinander, wie in Beispiel 4 bereits erklärt.
Das Menü
Das Menü ist ebenfalls in einem <div>-Container eingefügt, der mit den folgenden Stylesheets formatiert ist:width:14%; float:left; line-height:18px;Die Breite ist auf 14% festgelegt und die Zeilenhöhe sorgt für etwas Abstand unter den Hyperlinks im Menü.
Die Eigenschaft float plaziert Elemente auf der Seite und lässt andere vorbeifließen. In diesem Fall wird dem <div>-Container für das Menü
float:left zugewiesen, um ihn linksbündig auf der Seite auszurichten
und den nachfolgenden Inhalt rechts vorbeifließen zu lassen.
Inhalt
Deshalb ist für den Inhalt, genauer gesagt für den <div>-Container des Inhalts,float:right angegeben, um ihn rechtsbündig neben dem Menü auszurichten.
Weiterhin ist die Breite auf 80% festgelegt. Rechnet man die 14% vom Menü dazu,
bleiben
6% als horizontaler Abstand zwischen beiden Bereichen übrig. Das ist alles.Hier ist noch eine auf die <div>-Container reduzierte vereinfachte Darstellung