[RDiR] - 3 - strona + 2 panele boczne.

Witam, dziś przedstwię Wam jak stworzyć stronę z trzech części. Środkowa (największa) i dwie po bokach. Oczywiście każdy może sobie zmodyfikować.

Zacznijmy od stworzenia dokumentów, ja skorzystam z wczesniejszego poradnika, czyli wyśrodkowanej strony: http://wlodziu.eu/RDiR/ (2)
Najpierw ustalmy w naszym pliku CSS i divie strona jaką szerokośc (width) ma posiadać nasza strona przed podzieleniem czyli cała.
Moja bedzie miała 900px (czyli tj. w poprzednim poradniku)
Teraz czas podzielić naszą stronę na 3 części, ale razem muszą one tworzyć 900px.
Ja zrobiłem 200px 500px i 200px, czyli 500 + 2x200 = 900.
Teraz tylko trzeba przenieśc to na język CSS.
Tworzymy 3 divy (tyle mamy części), np. lewa, srodkowa, prawa.

Więc tworzę diva prawa, nadaję mu width: 200px; height: auto;, dlaczego? nasza strona będzie się wydłużać czym więcej treści, nei trzeba deklarować auto, ale lepiej. KOlejnym elementem w naszym divem to float: left;
FLOAT jest to pływanie elementów (każdy koło siebie).
U nas to będą trzy elementy zaczynając od lewej krawedzi (float: left) koło siebie, które razem mają 900px szerokości.

Nasz CSS dla lewej strony wygląda następująco: 

#lewa { 
float: left; 
width: 200px; 
height: auto; 
} 

Analogicznie tworzymy dla pozostałych dwóch (srodek i prawa):

#srodek { 
float: left; 
width: 500px; 
height: auto; 
} 
#prawa { 
float: left; 
width: 200px; 
height: auto; 
} 

No pieknie, pięknie.
Teraz czas to wyświetlić w naszym zaczynając od lewej strony (w naszym divie srodek z poprzedniego poradnika)

HTML:

<div id="strona"> 
   <div id="lewa"> 
   Lewa strona. 
   </div> 
   <div id="srodek"> 
   środek naszej strony<br> 
   środek naszej strony<br> 
   środek naszej strony<br> 
   środek naszej strony<br> 
   środek naszej strony<br> 
   </div> 
   <div id="prawa"> 
   Prawa strona. 
   </div> 
</div> 

Wyświetlamy elementy od lewej krawedzie, nam się ładnei poukłada i nei bedzie wolnej przestrzeni bo strona ma szerokość 900px a suma elementów też wynosi 900px i nic w tym poziomie nic tam nie wleci
Można także pomieszać te divy z wyświetlaniem np. srodek lewa prawa. Też nam ładny efekt wyjdzie ;]

Cel poradnika osiągnięty, ale co jak chcemy dodać stopkę?

Musimy ją nadać z parametrem float: left; z szerokością taką jak strona, żeby nigdzie nam nie wpadł w wolną szczelinę na stronie.
Bez float'a nasza wartośc width nei byłaby brana pdo uwage i by wypełnił ten div jakąś szczelinę to jak z wodą wypełni każdą szczelinę. Gdy nadamy ten parametr i szerokosc on nic nei wypełni bo się poprostu nie zmieści.
Np. do pudełka o pojemności 1l chcemy włozyć pół litra pudełka a drugie na tym litrowym pudełku, tak się nie da po to drugie wpadnie i wypełni wolną przestrzeń.

Nasz CSS stopki bedzie wyglądać:

#stopka { 
float: left; 
width: 900px; 
height: auto; 
} 

Możemy sprawdzić co się stanie gdy usuniemy float.

Dodajemy div stopkę w naszym html'u pod tymi podzielonymi.
Czyli bedzie to wyglądało: 

<div id="strona"> 
   <div id="lewa"> 
   Lewa strona. 
   </div> 
   <div id="srodek"> 
   środek naszej strony<br> 
   środek naszej strony<br> 
   środek naszej strony<br> 
   środek naszej strony<br> 
   środek naszej strony<br> 
   </div> 
   <div id="prawa"> 
   Prawa strona. 
   </div> 
    
   <div id="stopka">Przykładowa stopka... wlodziu.eu</div> 
</div> 

Myślę, że cel poradnika został osiągnięty w 120%

Dobry poradnik i super opisany, dla nowych na pewno się przyda .

Dobry poradnik. Wszystko ładnie opisane.

Pewnie się przyda.