•Laatikot•

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 oletusarvoista 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ä).

Laatikoilla voi olla ,myös tietty leveys. Se voi olla joko jonkin mittainen (pikseleillä tao 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ä selainikkunaa tosi paljon!

Myös laatikoiden korkeuden voi määritellä samalla tavalla, mutta usein on parempi, että laatikon sisältö määrää laatikon korkeuden. Tämäkin voi todistaa käytännössä, kun katsot tätä sivua kapeassa selainikkunassa.

Laatikot toisen laatikoiden sisällä

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älle, 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 righ-arvolla. Ympäröivälle elementille eli sille, jonka reunoista sijainti mitataan, asetetaan position-arvoksi "relative". Muuten etäisyys mitataan koko sivun ulkoreunoista.

un 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.

right: 0;
bottom: 0;
left: 0;
bottom: 0;
right: 0;
top: 0;

Pelkkä "top:0" ja vastaavat eivät vaikuta mitään, jos position-kohdass ei ole määritetty mitään. Vastaavasti pelkkä position-arvon asettaminen ei vielä siirrä elementtiä minnekään.