CSS: Dreispaltiges Seitenlayout

Frank Seitz - Developer Logbuch

Impressum

Kategorien



Alle Kategorien

Abonnieren

Validierung

Samstag, 9. Januar 2010

CSS: Dreispaltiges Seitenlayout

Layout mit Kopf, Fuss und drei Spalten:

Der HTML- und CSS-Code, der dies realisiert: 

<div id="header">
Header
</div>
<div id="left">
Left
</div>
<div id="right">
Right
</div>
<div id="middle">
Middle
</div>
<div id="footer">
Footer
</div>
#header {
  clear: both;
}
#left {
  float: left;
  width: 80px;
}
#right {
  float: right;
  width: 80px;
}
#middle {
  padding: 0 80px 0 80px;
}
#footer {
  clear: both;
}

Anmerkungen:

  • Die Breite von #header, #middle und #footer passt sich dem zur Verfügung stehenden Raum dynamisch an.

  • Die Reihenfolge der divs in HTML ist signifikant. Das div #middle kommt nach #left und #right.

  • "clear: both;" bei #header bewirkt, dass neben dem Header kein Float platziert wird. D.h. die beiden Floats #left und #right werden vom Browser darunter platziert.

  • Durch "float: left;" wird das Element #left links platziert. Analog wird Element #right durch "float: right;" rechts platziert. Die Breitenangabe "width: 80px;" weist den Floats ihren (fixen) horizontalen Raum am linken und rechten Rand zu.

  • Das Element #middle hat keine clear-Angabe und kann daher zwischen die Elemente #left und #right treten. Damit der Inhalt des div sich nicht mit den Randelementen überschneidet, wird mit "padding: 0 80px 0 80px;" ein Padding eingestellt, das den Raum, der von den Randelementen belegt wird, ausspart. Die Reihenfolge der Angaben ist: oben, rechts, unten, links.

  • "clear: both;" bei #footer verhindert, dass beim horizontalen Verkleinern des Fensters die oberen Floats neben oder unter den Footer springen.

  • Die Konstruktion aus den fünf divs kann in den HTML <body> oder eine Tabellenzelle <td> eigebettet werden.

Geschrieben von Frank Seitz in CSS, Web um 11:27

Kalender

Zurück September '24
Mo Di Mi Do Fr Sa So
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            

Statistik

Letzter Artikel:
08.07.2024 21:11
157 Artikel insgesamt

Links