Tässä tein sivun, jossa on kaksi elementtiä: #left ja #right. Nyt käy siten, että jos #left on korkeampi kuin #right, niin tämän sisältö menee yli isännöivän #doc elementin. (IE7 osaa näyttää oikein, muut eivät)
<div id="doc"> <div id="left"> Huuhaa<br> Huuhaa </div> <div id="right"> Huuhaa </div> </div>
IE7 (ja IE6) luottavat tapauksessasi selainbugiin: leveyden määrittäminen elementille kytkee päälle hasLayoutin, joka taas saa elementin CSS:n sääntöjen vastaisesti venymään myös kellutetun sisällön mittaan.
Saman efektin saa IE8 ja muilla selaimilla seuraavasti:
#doc:after {
clear: both;
content: '';
display: block;
}Tämä luo #docin loppuun 0 pikseliä korkean pseudoelementin, joka sijoittuu kellutettujen elementtien loppuun ja siten #doc venyy pisimmän mittaan. Lopputulos on sama kuin IE7:llä ja IE6:lla (kunhan leveys on määritelty).
Kiitos Merri! Sinultahan ne vastaukset aina löytyvät. =)
Aihe on jo aika vanha, joten et voi enää vastata siihen.