Niekedy z rôznych dôvodov (obsahu je príliš málo, a nevyzerá to dobre) obyčajný dvojstĺpcový layout nestačí. Je preto na mieste zabezpečiť, aby minimálna výška obsahovej časti bola vždy aspoň 100% veľká. Ako na to, si ukážeme a popíšeme v nasledujúcom príklade:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="obal">
<div id="stlpec">
<p>iné informácie</p>
</div>
<div id="obsah">
<h1>Webová stránka</h1>
<p>Obsah webovej stránky</p>
</div>
<div class="clear"></div>
<div id="pata">
<p>© Vaše meno</p>
</div>
</div>
</body>
</html>
CSS bude vyzerať takto:
html, body {
height: 100%; /*zapezpečí, že dokument bude vždy vysoký na celú výšku monitora*/
}
body {
margin: 0; /*vynuluje predvolený vonkajší okraj 8px*/
}
#obal {
width: 960px; /*určí šírku obaľovacieho prvku*/
margin: 0 auto; /*vycentruje*/
min-height: 100%; /*ak by ste použili height, obsah by pri stránke vyššej ako 100% vytiekol*/
padding-bottom: 8em; /*vytvorí miesto pre pätu*/
position: relative; /*zapezbečí možnosť poziciovať pätu vzhľadom na obaľovací prvok,
namiesto <body>*/
background-color: #CCC; /*slúži na viditeľnosť pri kontrole správnosti*/
}
#stlpec {
float: right; /*vlastnsoť float dovolí prvkom byť zoabrazené vedľa seba*/
width: 240px; /* určenie rozmerov*/
min-height: 700px; /*min-height kvôli neprečeteniu obsahu pri jeho väčšom množstve;
hodnota musí byť v pixeloch*/
padding: 5px;
background-color: rebeccapurple; /*opäť kvôli viditaľnosti*/
}
#obsah {
padding: 10px;
margin-right: 250px; /*vytvorí miesto pre stĺpec; v prípade,
že by bol zobrazený naľavo, použijeme vlastnsoť margin-left*/
}
.clear {
clear: both;
}
#pata {
width: 100%; /*nastaví päte rozmery, ktoré deaktivovalo použitie absolútneho poziciovania*/
position: absolute;
left: 0;
bottom: 0; /*zariadime, aby bola päta vždy dole vzhľadom na obaľovací prvok
(ktorý je vždy vysoký aspoň 100%) a nastavíme umiestnenie zľava a zdola*/
text-align: center;
border-top: 1px dotted #000; /*viditeľnosť*/
}
Princípom jednostĺpcového layoutu je nastaviť obalu minimálnu výšku (min-height) 100% a pätu absolútne napoziciovať (position: absolute;) na dno stránky. Ak obalu neudáme vlastnosť position: relative päta sa bude poziciovať, ale vzhľadom na prvok <body>, nie obal.
Pri dvojstĺpcovom layoute ide o rovnaký princíp, ale obsahovú časť musíme rozdeliť. Požadovaný efekt by sa nám podarilo dosiahnuť, aj v prípade, že by sme nechali obtekať (pomocou float) obidva stĺpce… Nebolo by však možné vytvoriť aspoň sčasti responzívny dizajn (ak nie je float, môžeme použiť min-width a max-width).
Dúfam, že je článok pochopiteľný a pre mnohých z vás aj poučný. Ak by ste niečomu nerozumeli alebo v článku našli chybu, pokojne prispejte do komentárov.