Budowanie kolumnowych layoutów w CSS'ie to łatwizna - tak pewnie powie Ci nie jeden programista stron internetowych. No i chcąc, nie chcąc będzie miał rację. Ale żeby to było łatwizną, najpierw trzeba od czegoś zacząć i gdzieś nauczyć się, jak to się robi...

Mam nadzieję, że powyższa struktura jest dla wszystkich jasna i zrozumiała. Problemy mogą jedynie pojawić się ze zrozumieniem div'a z identyfikatorem clear -jego zadaniem będzie 'poszprzątanie' po kolumnach. Tego rodzaju div'y należy zawsze stosować, jeśli we własnościach elementów pojawiają się float'y. 

Przejdźmy teraz do wyglądu CSS'a do wyżej zapisanej struktury HTML'owej. Kod CSS opisujący własności naszych kolumn wygląda następująco:

Jak możecie zauważyć w powyższym kodzie korzystam z dziedziczenia własności kolumn po identyfikatorze #column_wrapper. Dzięki temu nie muszę w #left_column oraz #right_column  pisać własności height i margin.

Powyższy kod jest przeze mnie wielokrotnie sprawdzony i wykorzystywany, zatem z własnego doświadczenia praktycznie gwarantuję, że będzie działał w każdej przeglądarce no i co ważne jest w pełni zgodny ze standardami organizacji W3C.

Jak teraz zbudować szablon składający się z wielu kolumn? Nic prostrzego, wystarczy powielić fragment kodu HTML dodając kolejne kolumny, a w CSS'ie dopisać ich własności. Czyli przykładowy kod dla czterech kolumn będzie wyglądał następująco:

HTML

CSS

Prawda, że to proste?

Dodaj do: