tässä on laatikko, jossa on tekstiä. laatikkotyyppisiä elementtejä ovat mm.tekstikappaleet (p), lohkot jotka eivät tarkoita mitään (div) ja otsikko (h1, h2,h3 jne). näiden laatikoiden leveys on oletusarvoisesti 100 pronsenttia, ja niiden korkeus määräytyy tekstin määrän mukaan.
teksti on oletusarvoisesti tasattu tasattu vasempaan reunaa (kuten tässä)
teksti voi olla myös keskitettyä kuten tässä
tai sitten tekstin voi tasata oikealle(kuten tässä)
laatikolla voi olla myös tietty leveys. se voi olla joko jonkin mittainen (pikselillä tai em-yksilöllä mitattu ),tai leveys voi olla jotakin suhteeseen ympäröivään elementtiin (prosenteilla ilmaistuna)
tämän laatikon leveys on 300px
tämän laatikon leveys on 30em
tämän laatikon leveys on 50%
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ällä, se onnistuu parhaiten käyttämällä asemointia (engl. positioning).
position-arvvoksi asetetaan "absolute". laatikon reunan etäisyys ympäröivän laatikon reunoista määritellään top- tai bottom-arvolla ja left- tai right-arvolla. ympyäröivälle elementille eli sille, jonka reunoista sijainti mitataan, asetetaan position- arvoksi "relative". muuten etäisyys mitattaisiin koko sivun ulkoewunoiosta.
kun tehdään näin, sisempi laatikko "otetaan pois" alkuperäiseltä paikalta, ja "laitetaan kaiken muun päälle". asemoididun elementin leveys lakkaa olemasta automaattisesti 100 prosessia, eikä se enää venytä sitä laatikkoa , jonka sisällä se on.