tämä on laatikko, jossa on tektiä. laatikkotyypisiä elemenettejä ovat mm. tekstikappaleet(p), lohkot jotka eivät sinänsä tarkoita mitään (div) ja otsikot (h1,h2,h3 jne) näiden laatikoiden leveys on oletusarvoisesti 100 prosenttia ja niiden korkeus määräytyy tekstin määrän mukaan
teksti on oletusarvoisesti tasattu vasempaan reunaan (kuten tässä)
teksti voi myös olla keskitettyä
tai sitten tekstin voi tasta oikelle (kuten tässä)
laatikolla voi olla myös tietty leveys. se voi olla joko jonkin mittainen (pikseleillä tai em-yksiköllä mitattuna), leveys voi olla jotain suhteessa ympyröivään elementtiin (prosenteilla lmaistuna).
tämä laatikon leveys on 300px
tämän laatikon leveys on 30em
tämän laatikon leveys on 50%
kokeile, mitä ylläoleva laatikoille tapahtuu, kun kavennat tätä selainikkunaa tosi paljon.
myös laatikon korkeuden voi määritellä samalla tavlla, mutta usein on parempi että laatikon sisältö määrää laatikon korkeuden. tämänkin voit todistaa käytännössä kun katsot tätä sivua kapeassa selainikkunassa.
näin
div-laatikoita voi olla sisäkkäin vaikka kuinka monta.jos haluaa asettaa jonkin laatikon täsmälleen tiettyyn kohtaa jonkin toisen laatikon sisällä, se onnistuu parhaiten käyttämälllä asemointia (engl.positioning).
position-arvoksi asetetaan "absolute". laatikon reunan etäisuus ympyröivän laatikon reunoista määritellä top- tai bottom-arvolle ja left tai right-arvolle. ympyrö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 100 prosentia, eikä se enää venytä sitä laatikkoa jonka sisällä se on.