Dobrý den, trápím se už delší dobu s následujícím problémem a rád bych požádal o pomoc:
mám tři divy:
<div class="all">
<div class="lefttext">Text</div><div class="righttext">text2</div>
</div>
a pro ně vytvořený styl:
.all {
width: 450px;
border: 1px solid red;
}
.lefttext {
float: left;
}
.righttext {
float: right;
}
jde mi o to, že se snažím dostat "text2" na pravou stranu rámečku o width: 450px, v IE se to zobrazí dobře, ale ve firefoxu nemám rámeček, ale 2px vysokou čáru. Zkoušel jsem i požít clear, ale taky bez úspěchu. Nevíte v čem by mohl být problém?
<HTML><div class="all"><br>
<div class="lefttext">Text</div><div class="righttext">text2</div><br>
<br style="clear:both;"><br>
</div><br>
Tohle bude zobrazovat rámeček okolo těch dvou divů i ve FF.</HTML>
děkuju a mohl bych poprosit o vysvětlení? proč to musím udělat? nepříjde mi to logické, aby se to tak zachovalo
<HTML>Vzhledem k tomu, že oba vnitřní divy jsou floatované, tak jejich obalující div má nulovou velikost a je třeba za vnitřní divy přidat tzv. čistič a ukončit tím obtékání. Například <br style="clear:both;"> či <div style="clear:both;"> </div>. Vím, že na JPW fóru o tom bylo kdysi pěkné téma, ale našla jsem jen <a href="http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=7&topic=44861" style="text-decoration:underline">téma o možnostech ukončení obtékání</a>.</HTML>
hrozně moc děkuju, jsem zas o něco chytřejší :-)
Thalia: taky by to asi tak šlo ale:
prohlížeče fungují tak, že vypisují (fšecko) z "leva" do "prava" - takže stačí, když napíšeš to co je v pravo s floatem right před to, co je v levo.
takže:
<div class="wrapper">
<div class="right">Text</div><div class="left">text2</div>
</div>
.wrap {
width: 450px;
border: 1px solid red;
}
.left {
/* není nutno zarovnávat nalevo */
}
.right {
float: right; /* zarovnání napravo */
}
takhle to funguje! ovššem - pravdu má vždycky moderátor ^_^ , takže pokud budeš chctít dát do wrapperu patičku, dáš jí vlastnost clear:both
ej chypka: v kódu je wrapper a css wrap :) radši to pojemenuj na obal :)
nesro: dík, nakonec jsme musel použít obě varianty a už to všehcno moc hezky vypadá:-)