Autor Zpráva
wifon
Profil
Neviem ako to vysvetlit tak tu hodim zdrojak ;)

<div id="main_div">
<div id="banner">
<div id="left_banner">
</div>
<div id="right_banner">
</div>
</div>
</div>

Takze situacia je nasledovna. #main_div ma height:auto; v pripade ze nastavim pre #banner height:100px tak sa main_div sa roztiahne. Potom nastavim pre #banner height: auto a pre #left_banner height:100px v mozzile sa uz tie dva nadradene DIVi neroztiahnu podla jeho velkosti cim to je? :( Vyzera to nejak takto :P
IE tak chcem aby to fungovalo ;)
http://grafika.gona.cz/ie.jpg
Mozzila a takto to vyzera v Mozzile :(
http://grafika.gona.cz/mozzila.jpg
Railbot
Profil
wifon
height: auto tam vůbec necpi.
Railbot
Profil
Mimochodem...levý pravý banner, nefloatujou náhodou? Řekl bych, že ano. Pokud je to tak, tak na konec obalujících divů dej nějaký cleaner.
wifon
Profil
Mimochodem...levý pravý banner, nefloatujou náhodou? Řekl bych, že ano. Pokud je to tak, tak na konec obalujících divů dej nějaký cleaner.

cleaner?co to je? :(
Railbot
Profil
wifon
například...

<div style="clear: both; line-height: 0; font-size: 0; height: 0">&nbsp;</div>

Samozřejmě lepší, když mu dáš nějakou třídu a ty styly zapíšeš někam do souboru, ne takhle inline.

A ještě dodám, že IE to právě zobrazuje špatně. Roztahuje ty divy, ale nemá, protože obsah je plovoucí. To jen pro úplnost.
wifon
Profil
Pokud je to tak, tak na konec obalujících divů dej nějaký cleaner.

A obalujici div je v tomto pripade #banner?
Railbot
Profil
wifon
Přesně tak.
wifon
Profil
ale mi to nefunguje :( CSS k tim DIVom mam taketo:

body
{
text-align: center;
}

*
{
margin: 0px;
padding: 0px;
}

#main_div
{
margin: 0 auto;
text-align: left;
top: 0px;
width: 1000px;
border: solid 1px black;
}

#banner
{
width: 1000px;
clear: both;
line-height: 0px;
font-size: 0px;
}

#left_banner
{
float: left;
width: 500px;
height: 100px;
border: solid 1px red;
margin: 0px;
padding: 0px;
}

#right_banner
{
float: right;
width: 490px;
height: 100px;
border: solid 1px green;
margin: 0px;
padding: 0px;
}
Plaváček
Profil
wifon

Zkus pro #banner přidat:

overflow:hidden

Občas to zabere
Gappa
Profil
element s overflow: hidden ve všech mě známých moderních prohlížečích (krom IE :) poctivě vyclearuje elementy v něm obsažené.

Pro IE stačí pro onen element aktivovat hasLayout a už také clearuje (více o hasLayout na MSDN nebo jak se tomu nadává).

Overflow: hidden se samozřejmě v moderních prohlížečích chová přesně tak, jak by měl - tedy se všemi klady i zápory tohoto řešení.
Keilew
Profil
Proč v banneru clearuješ? Vždyť nemáš co!
A top:0px je zbytečný.
A banner right může být taky float left + nějaký margin třebas.

Správná struktura je alespoň podle mne:
<obal>
<plaváček />
<plaváček />
<plaváček />
<čistič />
</obal>

To musí fungovat!
wifon
Profil
plavacek, plavacek, cistic?Co to ako je? :D
Keilew
Profil
wifon
Aha... Plaváček je jeden zdejší kolega a shodou okolností taky prvek, který má nastavenou hodnotu float na jinou než none. Čistič je blokový prvek, který má hodnotu clear nastavenou taktéž na jinou než none. Dohromady to umí hezká kouzla:-)
Keilew
Profil
http://blog.html.it/layoutgala/
Toto téma je uzamčeno. Odpověď nelze zaslat.