Donnerstag, 25. Juni 2009
Flexible Spalten und die Lösung für das Faux Column Problem
Jeder kennt das: man möchte ein 2-spaltiges Layout erstellen, bei dem beiden Spalten jeweils dieselbe Höhe haben.
Das zu realisieren schien bisher ein Ding der Unmöglichkeit zu sein, wenn man kein JavaScript verwenden möchte.
A List Apart bietet eine Möglichkeit, das Problem über ein sich wiederholendes Hintergrundbild zu lösen. Doch was macht man, wenn ein flexibles Layout haben möchte? Im Zuge der Barrierefreiheit bzw. -armut ein wichtiger Punkt.
Im Zuge meiner Tätigkeit als Webentwickler stellte sich für mich genau dieses Problem und ich habe ein Lösung gefunden.
Folgende Situation: Man möchte 2 Spalten haben, eine Haupt- und eine Maginalspalte. Beiden Spalten sollen zu jeder Zeit gleich lang sein, egal in welcher der beiden Spalten mehr Inhalt steht. (siehe Bild). Ich lege das Beispiel in der Einheit Pixel (px) an, es funktioniert aber genauso mit Element (em) und Prozent (%).
In meinem Fall soll die Hauptspalte #content blau (#003797) sein und eine Breite von 600px haben, die Maginalspalte #service orange (#ffcc00) und 200px. Mein Wrapper #main hat also insgesamt 800px.
Hier mein HTML Markup (relevanter Teil). Ich empfehle außerdem, IMMER ein Reset StyleSheet zu verwenden. Ich empfehle das von Eric Meyer.
- <div id="main">
- <div id="content">
- <!-- Start Maginalspalte -->
- <div id="service"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
- </div>
- <!-- End Maginalspalte -->
- <!-- Start Content -->
- <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
- <!-- End Content -->
- </div>
- </div>
Wichtig: Die Maginalspalte (#service) muss im Markup vor dem Inhalt kommen, aber IM #content Container. Warum? Gleich. Zudem sollen meine Container auch ein Padding haben.
Und hier jetzt der Trick!: Die Servicespalte wird mit negativen Margin nach rechts versetzt.
- #main {
- width:800px; /* Breite von unserem Wrapper */
- background:#ffcc00; /*gleiche Hintergrundfarbe von unserer Maginalspalte */
- overflow:hidden; /* Damit die Box mitläuft */
- _display:inline; /* IE6 Hack */
- }
- #content {
- padding:10px;
- float:left;
- width:580px; /* 600px - (2*10px) */
- background:#003797; /* Blauer Hintergrund */
- color: #fff /* weiße schrift */
- }
- #service{
- width:180px; /* 200px - (2*10px) */
- padding:0 10px; /* Padding top vererbt von #content */
- float:right;
- background:#ffcc00;
- color: #000;
- margin:0 -210px 0 0; /* Breite (200px) + padding (10px) = 210px */
- *margin-left: 13px; /* Padding (10px) + Jog Bug (3px); IE 6 & 7 */
- _position:relative; /* IE6 Hack */
- _display:inline; /* IE6 Hack*/
- }
Demo
Um das Ganze noch besser zu illustrieren, habe ich eine Demo erstellt: Flexible-Columns Demo
Browser-Kompatiblität
Funktioniert auf: Firefox 3.0 (win), Internet Explorer 6/7 (Win), Safari 4 (Mac OS X), Opera (Win)
Soweit, sogut. Ich hoffe, ich konnte all den Frustrierten da draußen weiterhelfen.
dhe
