Autor Zpráva
Mates111
Profil
Zdravím vás kolegové
mám takovej problém, že sem si udělal hlavní div, který obaluje další div s hlavním obsahem a poté ještě div s postranním článkem. Jenže když do hlavního obsahu vložím nějakej text, tak se mi ten div s hlavním obsahem dostane přes ten obalující div a to vůbec nechápu ja je to možné.

HTML
<div id="main">
                <div id="hlavni-obsah">
                </div>

                <div id="postranni">
                </div>

</div>

CSS
#main{
    border: 1px solid #c5c1c1;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px; 
    margin-top: 5px;
    margin-bottom: 5px;
}

#hlavni-obsah{
    width: 750px;
    float: left;
}

#postranni{
   margin: 5px 5px 5px 770px;
   padding: 5px;
   border:1px solid;
}

Byl bych moc rád za pomoc
Jan Kupka
Profil
Zdravím,

děje se to, protože jsi nastavil divu s hlavním obsahem vlastnost float a vyřadil jsi ho tak z normálního toku stránky. Obalující div se z hlediska výšky chová, jako by tam #hlavni-obsah nebyl a přizpůsobí svou výšku pouze postrannímu divu. Jakmile je postranní div nižší než hlavní, vznikne problém :) Způsobů, jak to vyřešit je několik, nejjednodušší je přiřadit divu #main deklaraci overflow: hidden (další způsoby najdeš Googlem třeba pomocí dotazu "css clearfix") a on "obalí" floatované potomky.
Mates111
Profil
super dík moc

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: