CSS Liquid Layout (3 wiersze, 2 kolumny)

Te layout składa się z 3 wierszy. Górny i dolny są stałej wysokości, natomiast wysokość środkowego zmienia się wraz ze zmianą rozmiaru okna. Środkowy wiersz jest podzielony na dwie kolumny - część główną i panel boczny. Szerokość panelu bocznego jest stała (podawana w pikselach), a szerokość części głównej zmienia się wraz ze zmianą rozmiaru okna. Obie kolumny są tej samej wysokości, niezależnie od zawartości. Bez wykorzystania tabel!

Pełna kompatybilność

Layout jest poprawnie interpretowany przez przeglądarki:

  • IE 6+
  • Firefox 1.5+
  • Opera 7+
  • Chrome 2+
  • Safari 1+

Testowany w systemach Windows i Linux.

Zgodność ze standardami

Kod jest w pełni zgodny ze standardami XHTML 1.0 Strict oraz CSS 2.1.

Bez kodu JavaScript

Layout nie zawiera kodu JavaScript.

Porawne rozmiary

Kwadraty 10x10px spozycjonowane absolutnie na rogach elementów strony testują poprawność ich wymiarów.

Odporność na resize tekstu

Zmiana rozmiaru tekstu w nowocześnych przeglądarkach (Ctrl+/Ctrl-) nie uszkadza layoutu.

Artykuł CSS Copyleft :) 2010 by Maciej Chałapuk