Varmaan helppo juttu, jos osaa, mutta kun ei osaa :-|

Miten asetetaan CSS:llä viisi <div>-elementtiä niin, että neljä on yhden sisällä ja ne muodostaa ikään kuin ikkunaristikon?

Ikkunaruutujen korkeuden pitäisi sitten automaattisesti muuttua sen mukaan, paljonko tekstiä niissä on sisällä.

HTML

Jotain ton tapasta.
Yhden boksin koko kun muuttuu niin levähtää koko romu.

Vaihtoehto onkin:

HTML

Juurikin tuon taulukolla toteutetun muotoilun korvaaminen css-muotoilulla oli mulla mielessä, kun kaikkialla toitotetaan, että taulukot on "out" ja css-muotoilu on "in". Kuitenkin melkein kaikki css-esimerkit on tyyppiä "yläpalkki ja pari, kolme saraketta alle".

Ehkä tommosen "joustavan" gridin toteuttaminen css:llä ei sitten kuitenkaan niin helppo juttu ole.

Henk.koht. olen kyllä sitä mieltä että taulujen käyttäminen on edelleen perusteltua taulukoiden esittämiseen.

Eikä taida Grez olla ainoa tuon mielipiteen kanssa. Jos kyseessä on oikeasti taulukosta, niin kyllä se taulukko on edelleen perusteltu esitystapa.

(Sori, tuli turha postaus)

jengi tuntuu luulevan että tablet kehiteltiin alunperin sivuston ulkoasun esittämiseen, kun kerran on näitä tablen vastustajia ja propagandan tekijöitä <div style="vuodatus:true">(oletteko nähneet sen sivun missä tableja haukutaan pahoiksi, ja esitetään kuinka vaikeaa on tablen soluihin laittaa paddingiä? esimerkissä oltiin luotu juuri tuollainen ristikko, ja he väittivät sitä vaikeaksi tehtäväksi taulukoilla, vaikka taulukot juuri kehiteltiin tuota käyttöä varten. Heidän über ratkaisu: laitetaan paddingi taulukon soluihin lisäämällä uusia tyhjiä soluja niihin kohtaan taulukkoa joihin halutaan päddingiä!, sitten seuraavana näkyy div esimerkki samasta, samannäköinen rakenne sillä koodilla, paitsi table, tr, td korvattu div elementeillä, ja lisätty koodiin "padding:5px" tjsp, ihan kuin taulukon soluille ei voisi näin tehdä lmao.)</div>

harmi etten muista tuota urlia enää :/

Näistä tappelu on niin vuodelta 2005 (kuten varmaan myös T.M.:n yllä mainitsema sivu). Eiköhän nykyään kaikki jo tiedä div- ja table-elementtien käyttökohteet, on niistä sen verta tauhkottu.

EDIT: Komento takaste, luin ketjun. Noh, huonot ovat olleet lähteet. Kuten aina tietoa etsiessä, kannattaa kiinnittää huomiota myös lähdemateriaalin julkaisuaikaan mikäli vain mahdollista.

Kiitos kaikille kommenteista. Yhteenvetona tulkitsen, että tuommoisen joustavan ikkunaruutumallisen layoutin helpoin (ja ehkä jopa ainoa) toteutus on taulukko. Tämä sopii minulle ihan hyvin. Halusin vain varmistaa, etten tee turhia typeryyksiä.

Käyttö ei ole riippuvainen siitä, millaisen visuaalisen lopputuloksen haluat, vaan ihan siitä, millaista sisältöä olet sijoittamassa HTML-sivulle. Alla on esimerkki, joka muuttaa otsikoidun listauksen taulukon näköiseksi käyttämättä CSS:n display tablea, joka on helpoin tapa tehdä taulukkoja ilman taulukoita. Tämä alla nähty temppu on tarpeellinen jos haluaa IE7 ja IE6 -yhteensopivuutta.


HTML


Tämä temppu perustuu CSS:n floatti + margin leiskantaittoon: viimeiseksi jätettävä palsta jätetään kelluttamatta (float) ja sille määritellään kellutettujen elementtien leveyden edestä marginaalia. Tässä esimerkissä tosin olen käyttänyt borderia, joka ei salli prosentuaalisten leveyksien määrittelyä kellutetulle elementille, mutta antaa tavallaan mahdollisuuden määritellä taustavärin kellutetulle elementille. Myös taustakuvan voi laittaa, silloin pitää vaan käyttää paddingia marginin/borderin sijasta.

Lopuksi varmistetaan se, että kelluttamaton elementti on aina vähintään kellutetun elementin pituinen. Tämä onnistuu käyttäen :after-pseudoelementtiä. IE:llä pitäisi määritellä leveys isännöivälle elementille, mutta tämmöisessä ruudukossa se ei ihan onnistu täysin halutulla tavalla. Ainoaksi korjaukseksi IE6:lle ja IE7:lle jää määritellä JavaScriptiä käyttöön, helpoimmillaan: Kyseessä siis Dean Edwardsin IE8-skripti, joka kasvattaa IE6:n ja IE7:n CSS-tuen määrää. Bugeja sekään ei korjaa, plus monimutkaiset tyylit voivat toimia raskaasti, joten sitä pitää käyttää harkiten.

Tämän tempun etuna oikeaan taulukkoon verrattuna on se, että graafista tyylittelyä on paljon monipuolisempaa tehdä. Taulukkomaisuutta voi lähteä hajoittelemaan monin eri tavoin, mikäli niin haluaa tehdä, mutta silti taulukon perusominaisuudet saa pysymään. Sisältö kuitenkin lopulta määrää sen, onko kyseessä oikea taulukko, listaus, palstoitus vai mitä. Yhtä ainutta oikeaa tapaakaan ei ole, ja joskus sisältö voi sopia useammalla eri tavalla esitettäväksi. Tämä on sitä CSS-taittoa: HTML:llä ryhmitellään sisältö rakenteeksi ja CSS tyylittelee rakenteen. Joskus toki tulee selainten rajallisuuksia vastaan kuin myös HTML:n rajat, onhan XHTML:kin jo 10 vuotta vanha. HTML 5 sisältää paljon uusia elementtejä, jotka hieman helpottavat sivun perusrakenteen luomista: linkkinavigoinnin voi tehdä nav-elementillä listaelementin sijaan jne.