Teen ekaa leiskaa ilman taulukkorakennetta, eli css:ää ja divejä apuna käyttäen. Tekstin asemoinnin kanssa tuli nyt ongelmia. Miten saan järkevästi seuraavanlaisen asemoinnin toteutettua diveillä: http://koti.mbnet.fi/saba1/e/testi.php ?? (tuo on esimerkki on toteutettu taulukoilla).
Onnistuin jo float:in avulla, mutta en saanut ulompaa div:iä skaalautumaan tekstien mukana, vaan tekstit meni siitä yli. Koska sivut on keskitetty, en voi käyttää position:absolut; komentoa.
Miten saisin järkevästi tekstit asemoitua divejä käyttäen, niin että myös ulompi div, eli tuo valkoreunuksinen laatikko kasvaisi tekstin mukana?
Ekaan olisi helppo vastata mutta viimeisessä tuo reunus. Se pistää miettimään.
En oo varma asiasta yhtään, ja varmaan ootkin katsonut googlella, mutta sanon yhden oppaan, josta voi olla hyötyä ellet ole jo tätä lukenut petepe web
Laita divien jälkeen <div style='clear: both; height: 1px'></div>, jolloin tuo kellutus (float) loppuu. Eli siis ennen ulomman divin lopetustagia. Ainakin empiirisillä testeillä pelkkä clear: both ei riitä kaikille selaimille, mutta tuon korkeuden lisäys auttaa siihen ongelmaan.
Ei tarvitse laittaa ylimääräistä elementtiä. Sellainen hieno kikkakoodi kuin overflow : hidden; riittää: jos tällaisen elementin sisällä on floatteja, niin elementin koko muuttuu automaattisesti oikeaan kokoon ja floatit tulevat näkyville. Tätä kikkaa löytää toimivana mallina esimerkiksi MegaTokion sivuilta roppakaupalla, eli se toimii myös kaikilla selaimilla (joten sitä uskaltaa käyttää).
Sitten tämä alun perin kysytty ongelma: itse olen huomannut parhaiten toimivaksi ratkaisuksi laittaa vain toiselle floatti ja leveys, sitten toiselle elementille marginaali sille puolen jonne floatattu asettuu. Luonnollisesti sen verran tai mielellään vähän enemmän marginaalia kuin floatatun elementin leveys on. Luonnollisesti myös tuo overflow : hidden; -kikka täytyy ottaa käyttöön.
Muoksis: Mielenkiintoista. Onnistuin sittenkin tekemään sivun, jossa tuo overflow : hidden; ei toimi IE:llä. Ehkä olen tehnyt jonkin tyhmän virheen jota en nyt huomaa, olen aika pahuksen väsynyt.
Kiitos kaikille vastauksista.
Aihe on jo aika vanha, joten et voi enää vastata siihen.