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 (kuten tässä).
Teksti voi olla myös keskitettynä (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%
Kokeile, mitä ylläoleville laatikoille tapahtuu, kun kavennat tätä selainta 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.
Näin
Div-laatikoita voi olla sisäkkäin vaikka kuinka montaJos haluaa asettaa jonkin laatikon täsmälleen tiettyyn kohtaan jonkin toisen laatikon sisällä se onn istuu parhaiten käyttämällä asemointia (positioning)
Position-arvoksi asetetaan "absolute". Laatikon reunan etäisyys ympäröivän laatikon reunoista määritellään top- tai bottom-arvoilla. 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 päälle". Asemoidun elementin leveys lakkaa olemasta autommaattisesti 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ääritetty mitään. Vastaavasti position-arvon asettamine ei vielä siirrä elementtiä minnekkään.