Prozatím jsme vytvářeli stránky s jednodušším dělením, kde byly základem dva sloupce. V dalších lekcích si ukážeme jak se pomocí stylů a divů dá řešit dělení stránky na tři sloupce.

Třísloupcový layout pomocí position

Přidat třetí sloupec na stránku lze několika způsoby. První, který si ukážeme, využívá vlastnost position u obou krajních sloupců (levého a pravého), a to tak, že levému nastaví nulovou souřadnici left, zatímco pravému zase nulovou souřadnici right:
div#levysloupec {position:absolute; left:0px; top:0px; width:150px;}
div#pravysloupec {position:absolute; right:0px; top:0px; width:125px; }
Protože jsme použili vlastnost position, jsou oba sloupce "vyjmuty" ze stránky a ostatní obsah neovlivňují. Kdybychom chtěli pro prostřední sloupec použít také vlastnost position, museli bychom určit jeho šířku, aby se nepřekrýval s pravým sloupcem (tím by byla určená i celková šířka), lepší ale bude, aby alespoň prostřední sloupec mohl měnit svoji šířku při změně velikosti okna nebo rozlišení (jak ve stylu vidíte, levý a pravý sloupec šířku mají danou). Vlastnost position pro prostřední sloupec tedy nepoužijeme, takže zůstane obsahem stránky a aby se nepřekrýval s levým a pravým sloupcem, musíme mu nastavit dostatečně velkou levou a pravou vnější mezeru - margin tak, aby se do nich levý a pravý sloupec vešly, například (vzpomeňte si, že se velikosti uvádějí od horní mezery a dále ve směru hodinových ručiček):
div#obsah {margin:0 150px 0 165px; padding: 0 1em;}

Ukázali jsme si princip jednoho ze způsobů rozdělení stránky na tři sloupce pomocí kaskádových stylů. Na konkrétní ukázce tento základ rozšíříme o další části stránky a různá stylová vylepšení.

Tři sloupce s hlavičkou a patičkou

Uvedené tři sloupce by pro většinu autorů byly málo, přidáme ještě alespoň hlavičku a patičku stránky. Pro přidání hlavičky bychom mohli všechny tři sloupce "posunout" dolů o výšku hlavičky (levý a pravý sloupec pomocí top, obsah pomocí margin), většina autorů ale využívá šikovnější způsob - sloupce "zabalí" do nového divu, pak stačí manipulovat jen s ním:
div#obal_sloupcu { border-top: 2px solid #009980; position: relative; background-color: white; margin: 0px; padding-bottom: 10px; }
Nejdůležitější vlastnost tohoto obalu je position: relative, znamená to, že souřadnice levého a pravého sloupce budou počítány od okraje tohoto obalu (vzpomeňte si - souřadnice position: absolute se určují v nejbližším předkovi s position relative nebo absolute). Ostatní vlastnosti snad opakovat nemusíme.
Přidat patičku není problém, prostě přidáme další div s příslušným textem na konec zdroje stránky.

Stránka je po technické stránce hotová, něco málo estetiky ale ještě doplníme. Momentálně jsou texty "nalepené" na okrajích prohlížeče, proto přidáme do body okraje a rovnou i nějaké písmo a barvu pozadí:
body {margin:10px 40px; padding:0px; font: 1em verdana, arial, sans-serif; background-color: #DCDCDC;}
Vzpomeňte si - pokud jsou u marginu uvedené jen dvě hodnoty, potom první je pro vodorovné mezery a druhá pro mezery svislé.
Na většině stránek také najdete div, do kterého je "zabalený" celý obsah stránky, použijeme ho také například k orámování celého obsahu:
div#obal_hlavni { border: 1px solid #009980; }
Nedá mi to a přece jen než vám "předám slovo" ještě trochu vylepšíme levý a pravý sloupec:
div#levysloupec {position:absolute; left:0px; top:0px; width:150px; padding:.5em 0 0 0; margin:22px 0 0 15px; border-top:2px solid #069; border-bottom:1px solid #069;}
div#pravysloupec {position:absolute; width:125px; top:0px; right:0px; margin:22px 15px 0 0; padding:1em .5em; border-top:2px solid #069; border-bottom:1px solid #069;}

Jádro zdroje stránky by mohlo vypadat tedy takto:
<div id="obal_hlavni">
<div id="hlavicka"> <h1>Pepův e-deníček</h1> </div>
<div id="obal_sloupcu">
<div id="levysloupec">
<ul>
<li><a href="#">Rubovie</a></li>
<li><a href="#">Středozem</a></li>
<li><a href="#">Daleko, za horami</a></li>
</ul>
</div>
<div id="obsah">
<h1>Hradec Králové</h1>
<p>Krajina na soutoku Labe s Orlicí, jíž dominuje město Hradec Králové, byla obydlena již v době předhistorické. Archeologické naleziště na okraji města v Plotištích nad Labem vykazuje několikanásobné osídlení jak z období pravěku, tak z doby římské. Kumulace pravěkých kultur na jednom místě v blízkosti brodu přes Labe a charakter nálezů dokazují, že po celé dlouhé úseky svého osídlení měla tato významná lokalita ráz obchodního střediska. Již v 10. století vzniklo zde slovanské hradiště rodu Slavníkovců s rušným tržištěm, ovládajícím starou obchodní stezku od Krakova přes Náchod k Praze.</p>
</div>
<div id="pravysloupec">
<p>Hradec Králové je moje rodné město. Chodím v něm do základní školy a možná později i do střední a potom? Kdo ví?</p>
</div>
</div>
<div id=paticka>
&copy;Pepa 2007
</div>
</div>
Pozor! Pokud nebudete mít ve zdroji uvedený typ dokumentu ( <!DOCTYPE ... atd. ) bude IE stránku zobrazovat chybně!

Název školy:	Základní škola, Hradec Králové, M. Horákové 258
Název projektu:	EU peníze školám
Číslo projektu:	CZ.1.07/1.4.00/21.2575
Téma:	Tvorba WWW stránek
Název:	VY_32_INOVACE_18_10B_tvorba www18
Autor:	Pavel Petr

Použité zdroje: Není-li uvedeno jinak, jsou všechny ilustrační obrázky dílem autora.