Autor Zpráva
medion
Profil *
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 450px, v IE se to zobrazí dobře, ale ve firefoxu nemám rámeček, ten se nevytvoří kolem textu, ale nad textem s výškou 2px, takže se vykreslí taková čára. Pomohl by mi někdo s mým problémem?
luka
Profil *
float-uj aj tu class-u all a skus pouzi nejaky clearer pod tym dvoma divmi
medion
Profil *
popravdě moc nechápu co si napsal, ale jestli myslíš "clear" tak jsem ho zkoušel, ale bez úspěchu
tajny spion
Profil
medion
Mezi vrstvu dvou divu a obalu vloz jeste jeden div a tomu nastav float left + border. Obalovacimu nastav pouze sirku.
medion
Profil *
funguje, děkuju

bohužel vznikl jiný problém...:(



.sirka {
width: 450px;
height: 122px;
}

.bg {
float: left;
padding: 10px;
background-color: #000000;
border: 1px solid red;
}

.text {
padding: 8px 0px 8px 12px;
}

.lefttext {
float: left;
}

.righttext {
float: right;
}

.all {
width: 100%;
}

.bg2 {
float: left;
}


<div class="sirka">
<div class="bg">
<div>text text text text text text text text text</div>
<div class="text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
<div class="all"><div class="bg2"><div class="lefttext">text text text</div><div class="righttext">text text</div></div></div></div>
</div>
</div>



všechno je jak má, jen mi to zase ve FF zobrazuje celý rámeček vyšší nehledě na to jakou výšku nastavím.
Trejpa
Profil
medion
<style>
.all { width: 450px; border: 1px solid red; }
.lefttext { float: left; }
.righttext { float: right; }
.konec { clear: both; visibility: hidden; }
</style>
<div class="all">
<div class="lefttext">Text</div>
<div class="righttext">text2</div>
<div class="konec"></div>
</div>


EDIT: Pozdě.

IE (quirk) a FF počítají šířku a výšku jinak:
http://ie-brouci.dero.name/box-model.html
http://www.jakpsatweb.cz/css/mody-prohlizecu.html

Možné řešení:
div { -moz-box-sizing: border-box; box-sizing: border-box; }
dracek
Profil
co takhle dá na ten nadřazeneý div
overflow: hidden;
(kupodivu funguje)
medion
Profil *
dracek

paráda, funguje, můžu poprosit o vysvětlení?:-) proč to funguje?
dracek
Profil
medion
Nevím, ale funguje.
Str4wberry
Profil
dracek
Text, který se nevejde to svého divu si ten div roztáhne. Overflow: hidden ho usekne.
dracek
Profil
Str4wberry
Zkus si to na tom příkladě a možná budeš překvapen. O klasickém významu overflow: hidden; vím :)
habendorf
Profil
overflow: hidden to totiž jakoby vyclearuje, ale je to řešení naprd. Není nad clasický clear.

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: