Alle guten Dinge sind 3! Float: left, float: right, float: what?
Nix wird so viel diskutiert wie das dreispaltige Layout in CSS. Es gibt verschiedene Herangehensweisen und Ansätze. Hier gibt’s eine zuverlässige Lösung zum downloaden…
Diese Methode einen 3-Spalter aufzubauen benutze ich eigentlich schon von Anfang an. Es stellt eine Art Framework dar, das sich spielend den Bedürfnissen des aktuellen Projekts anpassen lässt. Wirkliche Probleme gab’s noch nicht und alle gängigen Browser kommen damit gut zurecht.
Angelehnt ist es an die Float-Techniken von Dirk Jesse’s YAML (Yet Another Multicolumn Layout | Ein (X)HTML/CSS Framework) aber in einer wesentlich schlankeren Ausführung, da die meisten Browser-Hacks (z.B. für den Internet Explorer 5) nicht mehr integriert sind. Der Grundaufbau basiert auf einem Header, einer Spalte mit float: left, einer weiteren Spalte, die rechts gefloatet ist sowie der mittleren Column, die sich über seitliches Margin in die Reihe einfügt. Ein Footer sorgt für den notwendigen Clear (vgl. das Beispiel rechts).
Das Layout ist flexibel angelegt. Die Prozentwerte (z.B. im “wrapper” können aber durch feste Werte ersetzt werden um es in ein fixes zu verwandeln. Die einzelne Spalten sind mit “position: relative” belegt, damit deren Inhalte beliebig innerhalb des Containers platziert werden können (mit “position: absolute” siehe die “inner_right”-Box).
Natürlich kann das ganze auch zu einem 2-Spalter abgespeckt werden. Einfach die rechte Box für den Inhalt verwenden und die “main”-Box rausschmeissen.
So, jetzt aber viel Spaß beim basteln – die Vorlage gibt’s als rar-Datei und zwar hier.
3-Spalter Downloads: 204
