3 Boxen flexibler Breite in verschachtelten Containern, fluides Layout
Oliver Roth am 24.03.2003 – Ein Kommentar
Die hier gezeigten Beispiele wurden angeregt durch eine Problemstellung in der css-mailingliste "css-design@yahoogroups.de":
"Ich habe einen Container für die verschiedenen Inhalte. Bei Aufzählungen würde ich hier gern Listenboxen verwenden, so wie das mit Tabellenzellen möglich wäre. Dazu müsste ich die 3 Boxen von oben in meinen Inhaltscontainer setzen."
Im Prinzip handelt es sich im Folgenden um Variationen gängiger 3-Boxen-Modelle. Ziel war eine Umsetzung in fluider, breitenvariabler Form mit gleichmäßigen Randabständen der umgebenden Boxen, ohne dabei an Symmetrie zu verlieren.
Durch feste Weite für den äußeren Container und Modifizierung der Abstands-/Weitenangaben ist das Ganze natürlich auch für fixe Breiten anpassbar.
Beide Varianten können allerdings nicht den Anspruch gleicher Höhe bei unterschiedlich langen Textinhalten erfüllen. Eventuell wäre hier z.B. mit der Angabe von Höhen in relativen Einheiten (em, ex) oder/und Scrollboxen (overflow:auto) zu experimentieren.
Getestet unter folgenden Browsern/Plattformen: Win2k: IE 5.0, IE 5.5 WinXP: IE 6 SP1, Opera 5.12/6.05/7.03, Netscape 6.2.3/7.0, Mozilla 1.0 bis 1.3 MacOS 9: IE 5.1, Netscape 6.1, Mozilla 1.2.1 Linux: Konqueror 3.0.0, Mozlla 0.9.8, Galeon 1.0.3
Beispiel 1:
Umsetzung mittels Float-Positionierungen
Vorteil:
- fließender Umbruch der Boxen bei Verkleinerung des Browserfensters
Nachteil:
- leichte optische Abweichungen von Browser zu Browser möglich (speziell Geckos)
- geeignete Prozentwerte für browserübergreifend annähernd gleiches Ergebnis nur durch Probieren, notwendiger Hack wegen IE Win Float-Bug (siehe CSS)
- in Geckos kann bei manchen Fenstergrößen die rechte Border um die inneren Boxen verschwinden (Rundungsfehler?), ohne Border keine Probleme.
Hinweis: Hier ist die korrekte Angabe des Doctypes am Dokumentenanfang entscheidend, um vor allem Opera 7 vom Quirk- in den Standardmodus zu versetzen.
Beispiel 2:
Umsetzung mittels absoluten & relativen Positionierungen
Vorteil:
- genauere und zuverlässigere Positionierung/Abstandsregulierung
Nachteil:
- Sporadischer horizontaler Scrollbalken unter IE 5 Mac bei manueller Änderung der Fenstergöße, der nach Reload wieder verschwindet.
Ursache: Positionierungsangabe "right:x%"; Lösung: bisher keine :( - Ohne Angabe einer Mindestweite (geht z.Zt. nur in Geckos & Opera) können sich die Boxen ab einer gewissen Fensterbreite überlagern; Lösungen: Für IE 6 Win Hack für "Pseudo-min-width" (siehe CSS), für IE 5.+ keine außer Definieren der obersten Box über z-index.
