tässä on laatikko, jossa on tekstiä. laatikkotyyppisiä elementtejä ovat mm. tekstikappaleet (p), lohkot jotka eivät tarkoitä mitään (div), ja otsikot (h1, h2, h3, jne). näiden laatikoiden leveys on oletetusarvoisesti 100 prosenttia, ja niiden korkeus määräytyy tekstin määrän mukaan.
teksti on oletetusarvoisesti 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 jonkin mittainen (pikseleillä tai em-yksiköllä mitattuna), tai leveys voi olla jotakin suhteessa 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%.
myös laatikon leveyden voisi määritellä samalla tavalla, mutta on usein 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 laatikon täsmälleen tiettyyn kohtaan toisen laatikon sisällä, se onnistuu parhaiten käyttämällä asemointia (engl. positioning).
position-arvoksi asetetaan "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". etäisyys mitattaisiin 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ään 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ä minnekkään.