Na svém webu jsem se vždycky vyhýbal použití hodnot display začínající na table. To byla ale evidentně chyba. Proto vám tu dnes přináším návod, jak udělat sloupce tak, aby když třeba JavaScriptem přidáte nějaký obsah, aby se #content automaticky zvětšil na výšku bez jakéhokoliv vypočítání JavaScriptem výšky nebo jiné JS kejkle. Nebudu více mluvit, podívejte se raději na kód i s komentáři pro snazší pochopení. Je možné že některé deklarace CSS které zde uvidíte nebudou potřeba ale to už si zjistíte sami, když vám to nebude fungovat tak jak má.
/*r jako row, tedy obal celeho radku, ktery obsahuje vertikalni navigaci a obsah*/
#r {
display: table-row;
}
/*Dulezite je zde nastavit float:left; a sirku podle sirky vaseho layoutu*/
#nav {
width: 250px;
float: left;
}
/*Zde je dulezite nastavit vsechno co vidite, sirku si nastavte podle sebe na *px*/
#content {
float: right;
width: 750px;
height: auto;
}
/*Samozrejme po dvou vedle sebe float divech, je potreba rict prohlizeci, ze uz dalsi sloupce pridavat nebudete clear:both*/
#paticka
{
clear: both;
}HTML kód je pak ještě jednodušší. Prostě napíšete za sebou (ne do sebe) divy s ID #nav, #content a #paticka a celé to obalíte do divu #r.
<div>
<div>Navigace</div>
<div>Obsah stranky</div>
<div></div>
</div>Výsledek je takový, že i když JS přidávám HTML kód komentáře, stránka se výškou vždy automaticky přizpůsobí:
