Keskustelu: Nettisivujen teko: Divi divin sisällä

Olen valmistelemassa pieniä sivuja, mutta ongelmanani on divin sisällyttäminen diviin.

Esimerkki. Minulla on ns. wrapper-divi, jonka leveys on pikseleillä määritetty. Sen sisällä on yksi divi yläosassa ja pitäisi saada muutama yläosan divin alle. Nämä alle tulevat kuitenkin joutuvat wrapper'n ulkopuolelle. Miten tämän voi korjata?

Esimerkkisivu olis kova sana ni vois vaik web developeril lennosta kattoo/säätää sitä css:ää.

Juu, jätin viestini vähän puutteelliseksi, koska havaitsin juuri, että ongelman aiheuttaa float tyylitiedostossa. Jos alaosan divi saa ominaisuuden float: left, ei se tule wrapperin sisään.

body {
    background-color: #000;
}

#wrapper {
    width: 800px;
    margin: 0 auto;
    border: 1px solid #fff;
}

#ylaosa {
    width: 800px;
}

#alaosa {
    float: left;
}

ja

<div id="wrapper">
    <div id="ylaosa">
        1
    </div>

    <div id="alaosa">
        2
    </div>
</div>

Yksinkertaistetusti.

http://www.positioniseverything.net/easyclearing.html

Tai helpommin:

body {
    background-color: #000;
}

#wrapper {
    width: 800px;
    margin: 0 auto;
    border: 1px solid #fff;
    position: relative;
    overflow: hidden;
}

#ylaosa {
    width: 800px;
}

#alaosa {
    float: left;
}

Pling, ei turhaa ylimääräistä elementtiä. Huomaa että position: relative; tekee mahdolliseksi sen, että sen sisälle asetetut absoluuttiset elementit sijoittuvat #wrapperin mukaan, eivätkä bodyn mukaan. Olen huomannut tämän olevan varsin järkevä vaihtoehto.

overflow: hidden; aiheuttaa sen, että #wrapper huomioi myös kellutetut elementit omassa pystysuuntaisessa koossaan. Toisaalta se myös aiheuttaa sen, ettet voi sijoittaa elementtejä #wrapperin ulkopuolelle, mutta yleensä tälle ei pitäisi olla tarvettakaan.

Itse olen taasen tuon clearfixin vankkumaton kannattaja. Ei tarvitse kuin lisätä tuo clearfix-class noille wrappereille, joiden sisällä on kelluvia elementtejä. Ei ylimääräisiä elementtejä, eikä mitään rajoituksia. Mutta toki tuo Merrin keino on helpompi, mikäli temppua ei tarvitse tehdä useille elementeille.

Tuon .clearfixin haittapuoli taas on se, että se lisää ylimääräistä tyhjää muille kuin IE:lle, mistä voi olla haittaa tarkasti suunniteltua (runsasgraafista) ulkoasua tehdessä.

Clearfixillä on muuten myös rajoituksensa, asian huomaa jos tekee oikein floattipitoista monikerroksista ulkoasua: etenkin IE:ssä sisältö tahtoo alkaa helposti pomppia vähän sinne sun tänne, varsinkin jos sivulla sattuu sisällössä olemaan vaikkapa jokin taulukko. Toisaalta, omalla kohdallani tämä on aika harvinainen ongelma, minulle on vakiintunut läjä tietynlaisia työtapoja, joilla vältän tämänkaltaiset ongelmat. Enemmän asia nousee esille kun tarvitsee paikata toisten sivuja.

Sitten vielä vähän heikosti aihetta sivuavaa jorinaa jonka voi jättää halutessaan omaan arvoonsa: jos mennään varsin tiukan periaatteen mukaan, niin HTML:n sekaan ei edes saisi tulla class-nimeä, joka kuvaa ulkoasua - clearfix olisi juuri sellainen. Eli clearfixin CSS pitäisi siten määritellä aina kuhunkin ID-elementtiin, tai tiettyihin muihin class-elementteihin. Ajatuksena taustalla on tietysti se, että HTML olisi mahdollisimman puhtaasti sisältöä, ja siten ID:t ja class-nimet kuvaisivat myös sisältöä, eivätkä sitä mitä ne teknisesti ottaen olisivat. Noudatan tätä pääsääntöisesti (mutta en orjallisen tiukasti, varsinkaan työsivuilla), olen huomannut sisällön mukaisen nimeämisen helpottavan myös sivun hahmottamista huomattavasti.

Juu, tuo viimeinen seikka on ihan tosi ja se onkin ainoa heikko puoli kyseisessä kikassa. Itse en ole kuitenkaan mitään muita ongelmia havainnut, toisin kuin muissa vastaavissa virityksissä.