Dva sloupce
Chcete li vytvořit dva sloupce, musíte k tomu použít dva blokové elementy. U prvního z nich, s názvem atributu "levy", nastavte pevnou šířku (width:200px) a vlastnost plovoucí zleva (float: left). U druhého blokového elementu označme ho atributem class "pravy", bude obsah automaticky obtékat prvek "levy". Bude-li prvek "levy" kratší než "pravy" bude obsah bloku "pravy" pokračovat pod blokem "levy" viz ukázka. Abyste tomuto zamezili, přidejte do bloku "pravy" vnější levý okraj (margin-left: 205px;) na šířku bloku "levy" zvýšený o odstup mezi bloky.
Část obsahu souboru: layout1.html
<div class="stranka">
<div id="levy">levý panel</div>
<div id="pravy">pravý panel</div>
</div>
soubor: layout1.css
#levy {
width:200px; /*šířka levého sloupce*/
float: left;
border: 1px solid blue; /* pro vizualni ukazku*/
background: lightgreen; /* pro vizuální ukázku*/
}
#pravy{
margin-left: 205px; /*šířka levého sloupce + 5px na mezeru mezi rámečky*/
border: 1px solid blue; /* pro vizuální ukázku*/
background: lightblue; /* pro vizuální ukázku*/
}