Dvousloupcový layout s hlavičkou, patičkou a pevnou šířkou
V HTML souboru je třeba stránku uzavřít doo jednoho elementu (napříklada class stránka) a jednotlivá části také označit. V tomto případě to jsou třídy: hlavicka, obsah, levy, pravy, paticka,
soubor: layout2.html
<div class="stranka">
<div id="hlavicka">Horní lišta</div>
<div class="obsah">
<div id="levy">levý panel</div>
<div id="pravy">pravý panel</div>
</div>
<div id="patička">Dolní lišta</div>
</div>
Stěžejní je pak soubor CSS stylů, který vše naformátuje
soubor: layout1.css
body {
margin: 10px;
padding: 0px;
text-align:center; /* textový obsah bude vycentrován*/
}
.stranka{
margin-left: auto; /*zajistí vystředění stránky, ale musí být HTML hlavička strikt, tedy <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> */
margin-right:auto;
border: solid 1px black; /*orámuje celou stránku*/
width: 700px; /*nastaví pevnou šířku stránky*/
background-color: #ffcc99; /*pozadí stránky - prosvítá v mezerách mezi bloky*/
}
#obsah{
margin-top: 5px; /*Nastaví mezeru před obsahem - pod horní lištou*/
}
#hlavicka{
width: 700px;
height: 40px;
margin-top: 5px;
background-color: #dfdfdf;
vertical-align: bottom;
}
#levy {
float: left;
width: 150px;
height: 400px;
background-color: lightblue;
margin-bottom: 5px;
}
#pravy{
float: right;
width: 545px;
height: 400px;
background-color: lightgreen;
margin-bottom: 5px;
}
#paticka{width: 700px;
height: 40px;
margin-top: 5px;
background-color: #dfdfdf;
clear: both;}
Výsledná stránka