Die Content-Spalte

Die Content-Spalte hat eine Breite von 54.054%, was bei einer Bildschirmauflösung von 1024x800px ungefähr 540 Pixeln entpricht. Und natürlich kann sie im Quellcode als erstes vor der ersten Sidebar platziert werden, was aus Accessibility- oder SEO-Gründen Sinn machen würde.

Jede Layoutspalte benötigt ein extra div fürs padding, da der Innenabstand sonst auf die Breite der Spalte hinzuaddiert werden würde. bei der Berechnung des Innenabstands muss man 0.4% von 54.054% nehmen, was in diesem Falle einen Wert von 0.925% macht und bei einer Auflösung von 1024x800px 5 Pixeln entspricht.

Verwendete Techniken

Layout

Für das Layout der 3 Spalten wurde die Faux Absolute Positioning-Technik verwendet

Equal Height Columns

Für den Effekt der gleich großen Spalten wurden den Sidebars die Anweisung

                  margin-bottom: -32767px;
                  padding-bottom: 32767px;

und deren Container mit der id="HolyGrail" die Anweisung

                  overflow: hidden;

gegeben.

Font-Size

Bei der Schriftgröße wurden die Empfehlungen von How to size text using ems auf clagnut.com umgesetzt.

Browser-Kompatibilität

Dieses Layout funktioniert in:

  • Firefox 1.x, 2.x und 3.x
  • Opera 9.x
  • MSIE 7.x, 6.x, 5.5x und 5.0x
  • Safari 3.x
  • Konqueror 4.1.x

Die Erste Sidebar

Diese Spalte hat eine Breite von 13,944%, was bei einer Bildschirmauflösung von 1024x800px ungefähr 140 Pixeln entpricht.

Die zweite Sidebar

Diese zweite Sidebar hat eine Breite von 29,88%, was bei einer Bildschirmauflösung von 1024x800px ungefähr 300 Pixeln entpricht.