Keskustelu: Nettisivujen teko: CSS: oikeaan reunaan kaksi laatikkoa

Olen tässä taistellut css:n kanssa, kun tarkoitus olisi saada sivuston oikeaan reunaan kaksi diviä päällekäin, joista ylemmän korkeus vaihtelee. Siis tähän tapaan:

http://www.aijaa.com/v.php?i=1240502.png

Ylempi laatikko asettuu paikoilleen yksinkertaisesti (float: right). Sen sijaan alempi laatikko aiheuttaa harmaita hiuksia. Yksi keino on asetella se absoluuttisesti, mutta ongelmana on se että ylemmän laatikon korkeus vaihtelee. En ole keksinyt oikein mitään toimivaa ratkaisua vielä, tavoittelenkohan nyt mahdottomuuksia vai löytyisikö jokin keino, joka mieluiten toimisi joka selaimella..?

Tumpelo kirjoitti:

Ylempi laatikko asettuu paikoilleen yksinkertaisesti (float: right). Sen sijaan alempi laatikko aiheuttaa harmaita hiuksia.

Toimisiko jos laitat alemmallekin laatikolle float: right ja sen lisäksi clear: right?

Tumpelo kirjoitti:

... löytyisikö jokin keino, joka mieluiten toimisi joka selaimella..?

Ei varmasti löydy. Selaimia on kaikenlaisia.

Selkein ratkaisu olisi tehdä vaan yksi laatikko joka floattaa oikealle oikean levyisenä ja pistää sen sisälle molemmat laatikot.

clear : right; toiseen laatikkoon on ongelmallinen jos sivulla on muitakin floatteja, tai jos melkein koko leiska on taiteiltu floateilla.

funktio kirjoitti:

Toimisiko jos laitat alemmallekin laatikolle float: right ja sen lisäksi clear: right?

Kyllä näyttää toimivan mainiosti! Kiitoksia avusta! Toimii jopa IE 6:lla, vaikka sillä onkin vähän eri käsitys 10 pikselin ylämarginaalista.

Merri kirjoitti:

Selkein ratkaisu olisi tehdä vaan yksi laatikko joka floattaa oikealle oikean levyisenä ja pistää sen sisälle molemmat laatikot.

Tämä kävi mielessä, valitettavasti toteutus on tässä tapauksessa eräistä syistä johtuen liian työläs ja monimutkainen toteutettava.

Merri kirjoitti:

clear : right; toiseen laatikkoon on ongelmallinen jos sivulla on muitakin floatteja, tai jos melkein koko leiska on taiteiltu floateilla.

Tuntuu tässä tapauksessa toimivan - sivuilla ei ole muita floatteja kuin nuo kaksi laatikkoa.