this is a box. tämän laatikon sisällä on tekstiä, laatikkotyyppisiin elementteihin kuuluu (p) eli paragraph, (div) sekä otiskot (h1 h2). Laatikon leveys on automaattisesti 100%, ja korkeus riippuu tekstin määrästä.
tässä teksti on vasemassa reunassa.
tässä teksti on keskitetty.
tässä teksti on oikeassa reunassa.
laatikolla voi myös olla tietty leveys. Se voi olla jokin mitta, yleensä pixeleitä tai em, tai sitten se voi olla suhteessa ympäröiviin elementteihin, ilmaistu prosenteilla.
tämä laatikko on 300px
tämä laatikko on 30em
tämä laatikko on 50%
kokeile mitä laatikoille tapahtuu kun kutistat ikkunan leveyttä.
myös laatikon korkeuden voi määritellä samalla tavalla, mutta usein on parempi että laatikon sisältö määrää laatikon korkeuden.
juuri näin
voi olla niin monta kuin saajos haluaa asettaa jonkun laatikon tiettyyn kohtaan, voi käyttää asemointia (engl. positioning)
position-arvoksi asetetaan "absolute". Laatikon reunan etäisyys ympäröivän laatikon reunoista määritellään top- tai bottom- arvolla, ja left- tai right- arvolla. Ympäröivälle elementille eli sille, jonka reunoista sijainti mitataan, asetetaan position-arvoksi "relative". Muuten etäisyys mitataan koko sivun ulkoreunoista.
Kun tehdään näin, sisempi laatikko "otetaan pois" alkuperäiseltä paikaltaan, ja "laitetaan kaiken muun päälle". Asemoidun elementin leveys lakkaa olemasta automaattisesti 100prosenttia, eikä se enää venytä sitä laatikkoa, jonka sisällä on
pelkkä "top:0;" ei tee mitään, jos position kohdassa ei ole mitään. Vastaavasti, pelkkä position-arvo laittaminen ei tee mitään