Zajmiemy się teraz naszczym pudełkiem, aby to uczynić tworzymy diva np. div id="pojemnik" i do niego pakujemy całą resztę. Zacznijmy od header , który pełni rolę naszego nagłówka. Następmnie wrzućmy tam jeszcze jedno, albo dwa pudełka div i została nam jeszcze stopka, której odpowiada znacznik footer.

Tak prezentuje się nasza "pudełkowa" strona:

Możesz na nią wejść (klikając w ten obrazek), aby zobaczyć jak wygląda w praktyce.

Jeżeli sam spróbowałeś napisać taka stronę mogłeś się trochę zdziwić bo nie działała pewnie do końca tak jak oczekiwałeś. Tu potrzebne nam jest kilka rzeczy w CSS.Dla wszystkich pojemników jak i stopki musimy wstawić odpowiednie wartości width oraz height ponieważ gdy są one puste to nie zajmują miejsca. Aby kolumny w środku działały tak jak na stronie ich wspólna szerkość musi być równa szerokości pojemnika głównego i obie muszą posiadać właściwość opływania czyli float np.left.Aby stopka była zawsze na dole użyjemy właściwości clear:both;.Jak już wspominałem strona ma określoną szerokość i wysokość która nie zmieni się jeżeli zmiejszylibyśmy okno przeglądarki.

Innym przypadkiem jest strona tak zwana "płynna".Jej wartości w width jest ustawiona nie w pikselach a w procentach co pozwala na skalowanie jej gdy zmiejszamy okno przeglądarki.Należy pamietać tylko, że jeżeli ustawiliśmy wartość np. 60% na główny pojemnik, to w śroskowych pojemnikach nie ustawiamy do 60% czyli np.lewa 20% + prawa 40%, a normalnie do 100%

Oto strona płynna:

Możesz na nią wejść (klikając w ten obrazek), aby zobaczyć jak wygląda w praktyce.