Keskustelu: Nettisivujen teko: CSS: kaksi vierekkäistä diviä saman korkuisiksi

Kuinka on mahdollista saada kaksi vierekkäin aseteltua div-elementtiä venymään "yhdessä" toisen sisällöstä riippuen? Eli suomeksi sanottuna: jos toisessa sisältöä on vähemmän, se on silti saman korkuinen kuin toinen missä sisältöä on enempi. Koodini näyttää tältä:

#eka {
  width: 200px;
  border: 1px solid #000;
  float: left;
}
#toka {
  width: 100px;
  border: 1px solid #000;
  border-left: 0;
  float: left;
}

Tää on ihan villi veikkaus, mutta laitat molemmat divit yhden ison divvin sisään, jolle määrität jonku max korkeuden ja sisäkkäisten divvien korkeus sitten 100% ?

edit: Tai sitten ei. Oiskohan tästä apua: http://www.alistapart.com/articles/fauxcolumns/ tai tästä: http://www.candsdesign.co.uk/articles/dhtml/layout/same-height-columns/ .

Meinaat siis jotain tälläistä? Eli vaikka vasemmalla palstalla on vähemmän tavaraa niin se div kuitenkin loppuu vasta siellä missä oikeakin.

Jos tämä oli siis tarkoitus niin lähdekoodia ja tyylitiedostoja tutkimaan vaan niin varmasti selviää miten on toteutettu.

Smuliii kirjoitti:

Meinaat siis jotain tälläistä? Eli vaikka vasemmalla palstalla on vähemmän tavaraa niin se div kuitenkin loppuu vasta siellä missä oikeakin.

Itse asiassa tuolla sivulla se vasemman palstan divi loppuu jo puolessa välissä sitä vasemman palstan visuaalista tilaa. Se loppuun asti jatkuva graafinen ilme on toteutettu vain yhdellä divillä, joka sisältää molemmat palstat.

Jos pelkkä vaikutelma samanpituisista palstoista riittää, voit tehdä sopivan levyisen ja 1px korkean taustakuvan palstat sisältävälle ulommaiselle diville ja määrittää background-repeat: repeat-y;

Tein nopsasti esimerkin.

johan smulii tuosta laittoi esimerkin :D

Onhan se nyt vähän mukavampi katsella selkeää esimerkkiä kuin etsiä oleellisia asioita tuollaisen karmean kuran seasta.