Keskustelu: Nettisivujen teko: CSS: DIV, float ja borderit

Mikäköhän mättää seuraavassa koodinpätkässä, kun en saa bordereita päädivin ympärille?

<div class="paadivi">
  <div class="teksti">
     Tekstia
  </div>
  <div class="kuva">
     <img src="pieni.jpg" alt="" title=""/>
  </div>
</div>

Tyylitiedoston koodi:

.paadivi {
  border: 1px solid red;
}

.paadivi .teksti {
  float: left;
  width: 310px;
}

.paadivi .kuva {
  float: right;
}

Teksti- ja kuva-divit asemoituvat ihan oikein (teksti päädivissä vasemmalla ja kuva oikealla) mutta haluan näiden taustalle vielä taustavärin ja kehykset, ja jostain syystä päädivin borderi tulee siihen divin alkuun paksulla viivalla, eikä olleenkaan näy sivuilla ja alalaidassa.

Päädivin CSS koodi:

.paadivi {
  border-width: 1px 1px 1px 1px;
  border-style: solid;
  border-color: red;
}

Floatoidut elementit irroitetaan tavallisesta "flow:sta", jolloin niitä ei oteta huomioon laskettaessa päädivin kokoa. Kun päädivin sisällä on pelkkiä floatoituja elementtejä on tuloksena se, ettei tavallisessa flowssa ole mitään, ja päädivin sisältö on ikäänkuin tyhjä, mistä johtuen sille ei myöskään varata yhtään tilaa. Ylä- ja alareunat ovat siis kiinni toisissaan, jonka takia reunus näyttää paksulta. Myös se taustaväri on siellä, sitä vaan ei piirretä kun taustaakaan ei ole yhtään näkyvissä.

Asian voi korjata lisäämällä floatoitujen elementtien jälkeen jotain ei-floatoitua, ja kertomalla, että tämä pitää viedä kaikkien floatoitujen elementtien alapuolelle asettamalla sille clear: both;

Siis

<div class="paadivi">
  <div class="teksti">
     Tekstia
  </div>
  <div class="kuva">
     <img src="pieni.jpg" alt="" title=""/>
  </div>
  <div style="clear: both;"></div>
</div>

Suuri kiitos Blaze selvityksestä! Ongelma ratkesi :)

Vaikka ongelmaan on jo saatu vastaus, niin laitetaan lisäinfoa silti.

Toinen vaihtoehto on lisätä paadiville tyyli overflow : hidden; tai overflow : auto; - tällöin ei tarvitse lisätä ylimääräistä "turhaa" elementtiä. Muita mahdollisuuksia on lisätä min-height tai height -määrite, tosin tällöin täytyy ottaa huomioon IE:n virheellinen tapa käsitellä height min-heightin tapaan. IE on muutenkin hieman vaikea, joskus auttaa kun sille määrittää zoom : 1; ongelmalliselle elementille. Syyt tälle vaativat niin pitkän sepustuksen ettei vaan jaksa.

Hmm. Tuli sittenkin lisää ongelmia. Blazen ehdottama ratkaisu toimi kyllä omalla koneella (IE 6.0.2900.... & Firefox 1.5.0.7) mutta vanhemmalla koneella, jossa Firefoxista oli versio 1.0.6 leiska rupesi hajoilemaan. Onkos tällaisiin yhteensopivuusongelmiin muuta ratkaisua kuin kehottaa käyttäjää päivittämään selaimensa?