Olen takertunut näinkin yksinkertaiseen ongelmaan. Taulukoillahan tämä onnistuisi helposti, mutten halua käyttää niitä skaalautuvuus- ja nopeusongelmien vuoksi.
Eli pitäisi saada kaksi div:eillä määriteltyä laatikkoa vierekkäin. Olen turhautunut, kun luulisi olevan yksinkertaista enkä ole keksinyt ratkaisua edes kirjoja selaamalla.
Olen kokeillut mm.
display: inline;
ja
position: absolute; + position: vertical; yhdistelmää
Jälkimmäisellä saa kyllä laatikot vierekkäin, mutta niiden vaakasuuntainen sijoittelu vaatii tajuttoman paljon tarkkuutta varsinkin prosenteilla, pikseleillä taas skaalautuvuusetu menetetään.
Ensimmäinen taas ei tehnyt mitään, vaikka muutama kirja ja nettiopaskin niin väitti. Olen kokeillut uusimmalla Firefoxilla ja Operalla, eli selaimesta ei pitäisi olla kiinni.
Kertokaas joku viisaampi nyt hölmölle, että miten tämä yksinkertainen juttu hoidetaan CSS:llä.
No äkkiseltään paha sanoa kun ei tiedä mitä vaatimuksia noilla laatikoilla tarkalleen ottaen on, mutta luulisi että sen saisi aika helposti tehtyä laittamalla ne jälleen yhden divin sisään ja määrittelemällä niille siellä floatin ja sopivat leveydet (vaikka %-osuutena ulommasta divistä)
Oikea tapa riippuu siitä mitä olet tekemässä niillä laatikoilla. Jos ne on muun tekstin seassa, niin display:inline on oikea tapa. Jos taas muun sisällön vieressä, niin float.
Paljon kiitoksia. Kun laatikoita oli kolme, laitoin vasemmanpuoleisimpaan float: left;, oikeanpuoleisimpaan float: right; ja keskimmäiseen molemmat. Leveydeksi kaikille 33%, ja rivittyy kauniisti.
Elementille voi määritellä vain yhden float-määritteen. Jälkimmäinen korvaa ensimmäiseksi asetetun.
Olli kirjoitti:
Elementille voi määritellä vain yhden float-määritteen. Jälkimmäinen korvaa ensimmäiseksi asetetun.
Näinpä näkyy. Poistin keskimmäiseltä laatikolta float: right; -määritteen, ja toimii ihan samalla tavalla.
Käytännössä jos laitat divit peräkkäin vasemmanpuolimmaisista oikeanpuolimmaiseen, niin riittää kun laitat kahteen ekaan float: left.
Toinen ratkaisumalli on laittaa kaikille kolmelle yksinkertaisesti display: inline-block tai display: table-cell. Näitä on mielestäni helpompi hallita kuin kellutuksia.
Metabolix kirjoitti:
Toinen ratkaisumalli on laittaa kaikille kolmelle yksinkertaisesti display: inline-block tai display: table-cell. Näitä on mielestäni helpompi hallita kuin kellutuksia.
Molemmat toimivat paremmin kuin float, table-cell kuitenkin parhaiten.
Quantal kirjoitti:
Molemmat toimivat paremmin kuin float, table-cell kuitenkin parhaiten.
Niin, table-cell onkin "oikea" ratkaisu silloin, kun halutaan pakottaa laatikot riviin taulukkotaiton tapaan, mutta sen eräs käytännön ongelma on, että vähänkin vanhemmat IE:n versiot eivät tue sitä.
Taaksepäinyhteensopivia pohjaleiskoja löytyy CSSplaystä:
http://www.cssplay.co.uk/layouts/three-column-layouts.html
Nuo käyttää kikkaa, jossa heitetään runsaasti sisennystä ja negatiivista marginaalia alareunaan, mikä taas saa selaimen piirtämään elementtiä paljon pidemmälle kuin muutoin. Muistaakseni vanhimmat IE:t bugittaa kun muusta leiskasta tekee tarpeeksi monimutkaisen (tai jos koneella on todella alhaiset speksit), mutta muutoin toimii vallan hyvin ja eipä noista vanhimmista IE-versioista tarvitse enää onneksi kauheasti välittää.
Minulla on myös männävuosilta yksi table-cell -paikkaus käyttäen expressionia (jonka kanssa saa olla tosi varovainen jos ei tahdo loppumatonta silmukkaa):
http://merri.net/xhtml/
Käyn korjaamassa tuolla sivulla <!--[if IE]> tilalle <!--[if lte IE 7]>, koska table-cell -tuki tuli näemmä IE8:ssa.
Aihe on jo aika vanha, joten et voi enää vastata siihen.