W związku z częstmymi pytaniami o to co i jak zrobić, aby warstwy w danym układzie layoutu wyglądały tak jak chce autor, pojawiającymi się na forum.webhelp.pl zebrała się u mnie mała kolekcja takich layotów w związku z tym przekazuję je w Wasze ręce.

W celu ułatwienia nawigacji dodałem małe obrazki, aby pokazać zarys wyglądu.


Standardowy layout poratloway, 3 warstwy koło siebie.
Prosty układ poratlowy - 3 warstwy, 2 po bokach, środkowa zawiera treść, dokument ma szerokość ustaloną na 800px

3 warstwy - zagnieżdżona rozciąga główną.
3 warstwy - główna, zawierająca 2 elementy. W głównej warstwie znajduje się element przyciągany do lewej (float:left) który też powoduje rozciągnięcie głównej warstwy w zależności od swojej zawartości

Przeróbka designu tabelkowego
Ten layout nie ma nic wspólnego z żadnym z moich projektów, na forum się ktoś miał dokładnie to samo tylko że napisane w oparciu o tabelki no i chciałem udowodnić, że używając div+css też można to osiągnąć.

3 warstwy, jedna u góry jedna z prawej.
Znowu 3 warstwy nieco zmieniony wygląd. Tym razem przesunąłem jedną ze środkowych warstw na prawo. Żeby było widać dokładnie efekt nadałem im jakieś tła.

Nieskończona
Formatka powstała znowu jako odpowiedź na pytanie jednego z forumowiczów, ale uznałem w trakcie jej robienia uznałem, że jednak mi się nie chce, dlatego uważam ją za nieskończoną.

3 warstwy odwrócony porządek
Kolejny przykład leyoutu 3-warstwowego. W tym przypadku różnica polega na tym, że kolejność ich wyświetlania na stronie jest niezgodną z tą w dokumencie. Uzyskany efekt osiągnąłem dzięki pozycjonowaniu absolutnemu.

2 warstwy float ie bug fix
Tutaj nie widać nic szczególnego, ale jak kiedyś zaczniecie korzystać z floatów to może zauważycie, że IE (aktualnie ostatnia wersja to 6.0) ma błąd który powoduje dodawanie niechcianych marginesów do warstwy która została sfloatowana co ujemnie wypływa na wygląd strony jeżeli mamy ustalone tła. Tutaj udało mi się ten brzydki efekt wyeliminować.

4 warstwy - zachowanie odstępu między główną a stopką.
Kolejny layout powstały na życzenie użytkownika webhelp - zmieniłem tylko nazwy warst, żeby były zgodne z moim standardem. Pełna zgodność na dzień dzisiejszy tylko z Firefoxem ( więcej info tutaj).

3 warstwy - header, content i menu
3 elementowy layout z headerem, menu i warstwą odpowiedzialną za treść.