Keskustelu: Nettisivujen teko: Div-asemointi, helppiä tarvitaan

Nyt ei oikein suju. Jos joku Hc-guru voisi osoittaa mulle tutoa/antaa vinkkisä seuraavanlaiseen div-asemointi ongelmaan.

Mulla on Div1, jonka leveys on 800px ja korkeus 100% (korkeus ei riipu sisällöstä, vaan on aina 100%). Tämän Div1:sen sisään haluaisin kaksi eri kokoista diviä rinnakkain; 100px leveän Div2:sen (korkeudella ei väliä) ja
400px leveän Div3:sen . Jotta elämä ei olisi helppoa, Div3:sen tulisi alkaa esim. 250px saitin yläreunasta ja ylttyisi ihan alas asti. (riippumatta sisällöstä)
Div2:sen sijaitsisi aina Div3:sen vieressä ihan alhaalla.

Toi Div1:sen saan toimimaan ok, mutta nuo sisällä olevien divien saaminen paikoillensa tuottaa päänsärkyä. Saikohan kukaan selvää, mitä yritän tarkoittaa?

div2:
float: left
width: 100px

div3:
float: left
width: 400px
height: 100%;
top: 250px
position: absolute

div1sen sisään elementti jolla clear: both

Internet Explorer 6:ssa olevasta bugista johtuen (miten tämä ei yllätä?) tämän tempun teko on hieman vaikeampaa kuin sen pitäisi. Käytännössä homma onnistuisi älyttömän helposti asettamalla yhtä aikaa bottom ja top -ominaisuudet absoluuttiseen elementtiin. Tällä tempauksella kaikki muut selaimet paitsi IE7:ää edeltävät IE:t tajuavat miten elementti pitää asemoida.

html,body { height : 100%; }

#div1 {
min-height : 100%;
position : relative;
width : 800px;
}

#div2 {
bottom : 0;
position : absolute;
right : 250px;
width : 100px;
}

#div3 {
bottom : 0;
position : absolute;
right : 0;
top : 250px;
width : 250px;
}

IE6:n ja IE5.5:n taltuttamiseen löytyy tietoa tältä sivulta: Conflicting absolute positions. Käytännössä siis ehdollisilla kommenteilla annetaan div1:lle tyyli height : 100% (IE6 käsittelee sitä kuten min-heightiä) ja sitten tietysti tehdään bottom ja top -korjaus expressionin avulla.