Tässä on laatikko, jossa on tekstiä, laatikkotyyppisiä elementtejä ovat mm. teksti kappaleet (p), lohkot jotka eivät sinänsä tarkoita mitään (div) ja otsikot (h1, h2, h3 jne). Näiden laatikoiden leveys on oleitusarvoisesti 100%, ja niiden korkeus määräytyy tekstin määrän mukaan.
Teksti on oleitusarvoisesti 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 joko jonkin mittainen (pikseleillä tai em-yksilö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%
Kokeile, mitä ylläoleville laatikoille tapahtuu, kun kavennat tätä selain ikkunaa tosi paljon!
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
Div laatikoiden sisällä voi olla toisia laatikoita:
Näin:
Div-laatikoita voi olla sisäkkäin vaikka kuinka paljon.
Jos haluaa asettaa jonkin laatikon täsmälleen tiettyyn kohtaan jonkin 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ällä 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äisestä, ja "laitetaan kaiken muun päälle" Asemoidun elementin leveys lakkaa olemasta automaattisesti 100%, eikä se enään venytä laatikkoa, jonka sisällä se on