tässä on laatikko, jossa on tekstiä. Laatikkotyyppisiä elementtejä ovat mm. tekstikappaleet (p), lohkot jotka eivät 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 keskitettyä (kuten tässä).
tai sitten tekstin voi tasata oikealle (kuten tässä).
laatikolla voi olla myös tietty leveys. se voi olla joka jonkin mittainen (pikseleillä tai em- yksiköll' mittatuna), tai leveys voi olla jotakin suhteessa ympäröivään elementtiin (prosenteilla ilmaistuna).
tämä 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 määritellä samalla tavalla, mutta usein on parempi että laatikon sisältö määrä laatikon korkeuden.
näin
Div laatikoita voi olla sisäkkäin vaikka kuinka paljon.Jos haluaa asettaa jonkin laation täsmälleen tiettyyn kohtaa toisen laatikon sisällä, se onnistuu parhaiten käyttämällä asemointia (engl. positiong)
Position-arvoksi asetetaan "absolute". Laatikon reunan etäisyys ympäröivän laatikon reunoista määritellä top- tai bottom-arvolla ja left- tai right-arvolla. Ympäröivälle elementtille eli sille, jonka reunoista sijainti mitataan, asetetaan position-arvoksi"reletive". muute etäisyys mitattaisiin koko sivun ulkoreunoista.
Kun tehdään näin, sisempi laatikolla "otettaan pois" alkuperäiseltä paikaltaan, ja "laitetaan kaiken muun päälle". Asemoidun elementin leveys lakkaa olemasta automaattisesti 100 prosenttia,eikä se enää venytä sisältö laatikkoa, jonka sosällä se on
Pelkkä "top:0" ja vastaavat eivät vaikuta mitään jos, samalla ei määrätä position-arvoksi mitään. Vastaavasti pelkää position-arvon asettaminen ei vielä siirä elementtiä minnekään