Semmonen ongelma että minulla on DIV container elementin sisällä 2 pienempää elementtiä joista toisella on float:left width: 50% ja toisella float:right width: 50% arvot.
Ideanahan on siis että olen määrittänyt tuolle DIV containerille leveydeksi 100%, ja haluaisin että nuo elementit sen sisällä skaalautuisivat pienemmäksi jos selain ikkunaa pienentää. Nyt seuraapi ongelma, eli kun pienennän ikkunaa niin toinen laatikoista aina liukuu toisen alle. Onko mitään keinoa estää tuota tapahtumasta, haluaisin että laatikot pysyisivät samalla tasolla toistensa kanssa.
Tuo ongelma ilmenee vain Internet Explorerilla. Muut selaimet kyllä tajuavat mistä on kyse. Näinhän se kyllä toimii:
<html><head><title>Testi</title><style type="text/css">
div {
border : 2px solid blue;
overflow : hidden;
width : 100%;
}
div div { border : 0; }
.left {
background : red;
float : left;
height : 100px;
width : 49.99999%;
}
.right {
background : yellow;
float : right;
height : 100px;
width : 49.99999%;
}
</style></head><body>
<div>
<div class="left">Laatikko 1</div>
<div class="right">Laatikko 2</div>
</div>
</body></html>Firefoxissa tosin jää väliin pyöristyksen takia välillä yhden pikselin edestä tyhjää. Samaa voi toistua muillakin selaimilla, joten ei kannata luottaa siihen että laatikot nuolevat toistensa reunoja.
Aihe on jo aika vanha, joten et voi enää vastata siihen.