Autor Zpráva
wordík
Profil *
Zdravim, dnes jsem narazil na problém s css kontejnery.
Mám jeden hlavní box (obal) a poté hlavní box, ve kterém mám zase 2 boxy.
A právě zde nastal problém, pravý box se zobrazuje správně pouze v IE
(překvapivě).

Pro ukázku tu mám obrázky, první je z IE, druhý z FF i Opery:
IE: http://img122.imageshack.us/img122/5366/iefn1.png
FF & Opera: http://img408.imageshack.us/img408/2778/ffpc4.png

HTML:
<div id="page">

<div id="main">
<div class="left_box">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetuer eu et ut tortor laoreet. Vitae id
Aenean tempus ultrices egestas dui Nam Morbi ut Nam. Montes vitae ligula Aliquam
tincidunt venenatis at risus sagittis lobortis accumsan. Vel nunc habitant et
cursus eget et Vestibulum mauris quis sit. Malesuada adipiscing sed tincidunt
laoreet felis orci semper lorem parturient id. Venenatis adipiscing felis lacus
at id Nunc accumsan urna Sed.</p>
<p>Ligula mauris Quisque leo Curabitur Cras Mauris sollicitudin In eu ligula.
Augue rhoncus pharetra pretium pede augue vel et Morbi dignissim velit.
Convallis nulla eget ac et elit consectetuer lacinia Aenean Suspendisse Sed. Est
dui turpis adipiscing neque egestas sit et orci orci hendrerit. Dolor ut leo
Aenean nibh Nulla orci sagittis.</p>
<p>Eros tortor mauris nascetur suscipit eget vitae tincidunt ac pulvinar lacus.
At ornare Curabitur feugiat Lorem eget quis leo Cras Vestibulum nisl. Ut eros
dignissim Suspendisse orci Cras sed amet rutrum enim pellentesque. Fames Vivamus
elit aliquam volutpat lobortis laoreet nec wisi laoreet leo. Elit nec sem justo
ipsum est consequat Lorem Vestibulum senectus amet. Et.</p>
<p>Sed eu sapien sagittis sodales augue enim lacus nec ut dapibus. Eros et Ut
dui a eget vel tempor convallis sit tincidunt. Diam laoreet nunc convallis enim
nibh eget nulla orci Curabitur tristique. Curabitur vitae orci amet mauris wisi
netus justo sem id et. Ipsum Curabitur nibh dui leo id tempus.</p>
</div>

<div class="right_box">
<span class="new_date">6.března 2008</span> - test<br>
<div class="new_text">»Lorem ipsum dolor sit amet consectetuer eu et ut
tortor laoreet. Vitae id Aenean tempus ultrices egestas dui Nam Morbi ut
Nam.</div>
</div>
</div>

</div>


CSS:
div#page{
width: 800px;
margin: 0px auto;
padding: 5px;
}
div#main{
border: 1px solid #000000;
background-color: #ffffff;
width: 100%;
height: 100%;
text-align: left;
margin-top: 3px;
padding: 5px;
}
.left_box{
width: 560px;
float: left;
}
.right_box{
border: 1px solid #000000;
width: 225px;
padding: 5px;
}
.new_date{
font-weight: bold;
}
.new_text{
margin-left: 5px;
margin-bottom: 5px;
}


PS: zkoušel jsem i:
.right_box{
border: 1px solid #000000;
width: 220px;
padding: 5px;
float: right;
}


ale FF a Opera to zobrazí pro změnu takto:
ODKAZ

jako kdyby box main, kontejnery vůbec nevnímaly.

Díky předem za pomoc
Manq
Profil
V druhém připadě ti chybí čistič. Zaclearuj na konci obalového divu nebo mu nastav overflow:hidden;.
Dero
Profil
wordík: Ano, plovoucí boxy jsou vyňaty z běžného toku dokumentu. V tomto konkrétním případě to znamená, že tvůj druhý pokus s dvojím floatováním je proveditelný, pokud za oba prvky (ale stále do bloku main) vložíš prvek s nastaveným clear: both.

Existují i jiná řešení, ale tohle je pro pochopení problematiky nejlepší.
wordík
Profil *
aha, oběma děkuji za pomoc ;-)

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: