Tässä on laatikko, jossa on tekstiä. Laatikkotyyppisiä elementtejä 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
Teksti voi olla myös keskitettyä
Tai sitten tekstin voi tasata oikealle
Laatikolla voi olla myös tietty leveys. Se voi olla joko jonkin mittainen (pikseleillä tai em-yksiköllä mitattuna), tai leveys voi olla jotakin suhteessa ympäröivään elementtiin (prosenteilla ilmoitettuna)
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 voi määritellä samalla tavalla, 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 kohtaan jonkin toisen laatikon sisälle, se onnistuu parhaiten käyttämällä asemointia (engl. positioning)
Position-arvoksi setetaan "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 100 prosenttia, eikä se enää venytä sitä laatikkoa, jonka sisällä se on
Pelkkä "top:0" ja vastaavat eivät vaikuta mitään, jos position-kohdassa ei ole määritelty mitään. Vastaavasti pelkkä position-arvon asettaminen ei vielä siirrä elementtiä minnekkään.