Categories: Software

CSS-Floats für ein dreispaltiges Seitenlayout

Eins der geläufigsten Seitenlayouts im Internet ist derzeit eine dreispaltige Anordnung. Der Hauptinhalt der Site erscheint normalerweise in der mittleren Spalte, auf jeder Seite flankiert von Spalten, die Navigation oder Ähnliches enthalten. Die drei Spalten sind häufig unterhalb einer horizontalen Kopfzeile angeordnet, die sich über die gesamte Breite der Site erstreckt. Ergänzt wird das Layout durch eine entsprechende Fußzeile unten.

Die meisten Web-Designer sind mit den Techniken vertraut, um ein solches Layout mithilfe von Tabellen zu erstellen. Sie können entweder ein Layout mit fester Breite schaffen oder ein „flexibles“, das sich automatisch an die unterschiedlich breiten Browserfenster der User anpasst.

Da man sich jedoch von Layouts auf Tabellen-Basis allmählich verabschiedet, sind viele Web-Designer auf der Suche nach Möglichkeiten, dieses dreispaltige Layout mit den neuen Mitteln der Wahl zu erstellen – XHTML und CSS. Ein Layout mit fester Breite ist mit CSS nicht allzu schwer umzusetzen, indem man absolute Positionierungen benutzt. Aber die flexible Variante ist schon etwas schwieriger in den Griff zu bekommen. Deshalb hier ein Rezept für ein dreispaltiges Layout, das die CSS-Attribute float und clear verwendet, um Flexibilität zu erzielen.

Das Prinzip

Das grundlegende Layout besteht aus fünf div-Elementen, jeweils einem für Kopfzeile, Fußzeile und die drei Spalten. Die div-Elemente für Kopf- und Fußzeile erstrecken sich über die gesamte Breite der Seite. Die div-Elemente für die linke und rechte Spalte haben eine feste Breite und verwenden das float-Attribut, um sie an der linken bzw. rechten Seite des Browserfensters zu verankern.

Das div-Element für die mittlere Spalte zieht sich ebenfalls über die gesamte Breite der Seite, aber der Inhalt dieser Spalte ist flexibel zwischen den div-Elementen der linken und rechten Spalte angeordnet. Da das div-Element der mittleren Spalte keine feste Breite hat, kann es sich frei ausdehnen oder zusammenziehen, wie es Änderungen des Browserfensters jeweils erfordern. Padding-Attribute für die linke und rechte Seite des mittleren div-Elements halten den Inhalt in einer sauberen Spalte zusammen, selbst wenn er sich weiter nach unten erstreckt als eines der beiden div-Elemente am Rand.

Page: 1 2

ZDNet.de Redaktion

Recent Posts

Microsoft nennt weitere Details zu kostenpflichtigen Patches für Windows 10

Erstmals liegen Preise für Verbraucher vor. Sie zahlen weniger als Geschäftskunden. Dafür beschränkt Microsoft den…

12 Stunden ago

Microsoft verschiebt erneut Copilot Recall

Die Entwickler arbeiten noch an weiteren „Verfeinerungen“. Windows Insider erhalten nun wohl eine erste Vorschau…

1 Tag ago

GenKI im Job: Mitarbeitende schaffen Tatsachen

Laut Bitkom-Umfrage werden in jedem dritten Unternehmen in Deutschland private KI-Zugänge genutzt. Tendenz steigend.

1 Tag ago

97 Prozent der Großunternehmen melden Cyber-Vorfälle

2023 erlitten neun von zehn Unternehmen in der DACH-Region Umsatzverluste und Kurseinbrüche in Folge von…

1 Tag ago

„Pacific Rim“-Report: riesiges, gegnerisches Angriffs-Ökosystem

Der Report „Pacific Rim“ von Sophos beschreibt Katz-und-Maus-Spiel aus Angriffs- und Verteidigungsoperationen mit staatlich unterstützten…

2 Tagen ago

DeepL setzt erstmals auf NVIDIA DGX SuperPOD mit DGX GB200-Systemen

NVIDIA DGX SuperPOD soll voraussichtlich Mitte 2025 in Betrieb genommen und für Forschungsberechnungen genutzt werden.

2 Tagen ago