Tässä on laatikko, jossa on tekstiä. Laatikkotyyppisiä elementtejä ovat mm. tekstikappaleet (p), lohkot jotka eivät 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 olla myös keskitettynä tässä (kuten tässä).
tai sitten teksti voi tasata oikealle (kuten tässä).
laatikolla voi olla myös tietty leveys. se voi olla joko jonkin mittainen ( pikselellä tai em-yksiköillä mitätuna), tai leveys voi olla jotakin suhteessa ympäröivään elementiin (prosenteilla ilmaistuna)
tämän laatikon leveys on 300px
tämän laatikon leveys on 30em
tämän laatikon leveys on 50%
myös laatikon korkeuden voisi määritellä samalla tavalla, mutta usein on parempi että laatikon sisältö määrää laatoikon korkeuden.
näin
div-laatikoita voi olla sisäkkäin vaikka kuinka paljon.jos haluaa asettaa jonkin laatikon täsmälleen tiettyyn kohtaan toisen laatikon sisälle, se onnistuu parhaiten käytämällä asemointia (engl. posintiong)
posintion-arvoksi asetetaan ""absolute". laatikon reuan etäisyys ympäröivien 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 mitattaisiin koko sivun ulkoreunasta.
kun tehdään näin, sisempi laatikko "otetaan pois" alkuperäiseltä paikaltaan, ja laitetaankaiken muun pääle. asemoidun elementin leveys lakkaa olemasta automaatisesti 100 prosenttia, eikä se enää venytä sitä laatikkoa, jonka sisällä se on.
pelkkä "top:0" ja vastaavat eivät vaikuta mitään, jos samalla ei määrätä position-arvoksi mitään. vastaavasti pelkkä position-arvon asettaminen ei vielä siirrä elementtiä mitenkään.