Tässä on laatikko! Jossa on tekstiä!! :D Laatikko tyypissä elementtejä ovat mm. tekstikappaleet (p), lohkot jotka eivät tarkoita mitään (div) ja otsikot (h1, h2, h3 jnejnejneee...) Näiden laatkoiden leveys on oletusarvoisesti 100%, ja niiden korkeus määräytyy tekstin määrän mukaan.
Teksti on oletusarvoisesti tasattu vasempaan reunaan (kuten tässä)
teksti voi olla keskitettyy myös! (kuten tässä)
tai sitten tekstin voi tasata oikealle (kuten tässä)
Laatikolla voi myös olla tietty leveys. se voi olla tietyn mittainen (pikseleillä tai em-yksiköllä mitattuna) tai leveys voi olla jossakin suhteessa yhmä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 korkeuden voisi määritellä samalla tavalla mutta usein on parempi että laatiokon sisältö määrää laation korkeuden.
Näin ദ്ദി(˵ •̀ ᴗ - ˵ ) ✧
div-laatikoita voi olla sisäkkäin vaikka kuinka monta!!Jos haluaa asettaaa jonkin laatikon täsmälleen tiettyyn kohtaan toisen laatikon sisällä, se onnistuu parhaitense onnistuu parhaiten käyttämäll' asemoitia (englanniksi positioning!)
Position-arvoksi asetetaan "absolute". laatikon reunan etäisyys ympäröivän laatikon eunoista määritellään top- tai bottom-arvolla ja left- tai right-arvolla. ympäröivälle elementille eli sille, jonka reunoista siainti mitataan, asetetaan position-arvoksi "relative". Muuten etäistyys mitattaiseiin 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 automaattiosesti 100%, eikä se enää venytä sitä laatikkoa, jonka sisällä se on.
Pelkkä "top:0" ja vastaavat eivät vaikuta mitään jos position-kohdasse ei ole määritelty mitään. Vastaavasti pelkkä position-arvon asettaminen ei vielä siirrä elementtiä minnekkään.