Die Suche nach dem perfekten 3-Spalter ohne Tabellen-Markup wurde in der Vergangenheit oft mit der Suche nach dem "heiligen Gral" verglichen. Mittlerweile gibt es viele "Holy Grail"-Implementationen; hier ist mal eine faux absolut positionierte.
Im Gegensatz zur A List Apart-Definition vom holy grail, der fixe Seitenleisten im Layout vorsieht und nur den Contentbereich elastisch lässt, definiere ich meines nach "adaptation"-Manier: Es muss sich anpassen können. Nicht nur der Seite, auch den Bedürfnissen des Layouters.
Um was zum Gucken zu geben: Faux absolute positioned 3 col layout.
Dieser 3-Spalter sieht aus wie Altbekannte, hat aber folgende Eigenschaften:
- Ob es ein fixes, elastisches oder em-basiertes Layout ist, lässt sich an einer Stelle im Stylesheet einstellen!
In der Canvas-ID stehen die relevanten Anweisungen. Die derzeitige Einstellung im Mockup istwidth: 100%;, was daraus ein elastisches Layout macht. Setzt man diese auf einen em-Wert, verhält es sich bei älteren Browsern wie ein em-basiertes Layout, weil die Spalten per FAP in Prozenten gelayoutet sind. Sollte man den Drang nach einem festen Layout verspüren, setzt man einen Pixel-Wert. Ein zusätzlichesmargin: 0 auto;zentriert das Ganze. - Das Layout lässt sich dank FAP-Technik sehr leicht um weitere Spalten erweitern. Dabei kann man die Reihenfolge der einzelnen Spalten im Quellcode unabhängig von ihrer optischen Anordnung genau kontrollieren und so aus SEO- oder Accessibility-Gründen dafür sorgen, dass der wichtigste Content immer oben steht.
- Es ist ziemlich Browser-Kompatibel: Firefox 2.x und 3.x, Opera 9, MSIE 7.x, 6.x, 5.5x und 5.0x, Safari 3 und Konqueror 4.1.3 (mit leichten Abweichungen im Abstand). Und zwar ohne Browserweichen oder spezifische Hacks.
Ein Nachteil soll nicht verschweigen werden: Es sind ne Menge divs nötig, um diese Eigenschaften hinzukriegen. Macht also nicht gerade ein schlankes DOM, wenn man sich noch weitere verschachtelte Elemente im Contentbereich vorstellt. Es ist halt vor dem Einsatz abzuwägen, worauf man mehr Wert legt.

1
Loewenherz: Meine Güte Alp, alter Weggefährte, nach zwei Wochen noch kein Kommentar zu diesem Posting? Dabei ist dein heiliger Gral durchaus ansehnlich. Und ich finde die Container vertretbar (aus meiner Sicht als SEO heraus).
iyi günler
Loewenherz
2
alp: Hi Frank ... also ich habe keinen Kommentar gelöscht oder so
Beste Grüße (die Spinne unten rechts ist klasse)
3
Sandra: Nettes Tool. Sowas kann man als Blogger immer brauchen. Danke