Boxmodellen - positionering med CSS

..for at forstå hvordan positionering med CSS virker, er det nødvendigt at forstå Box modellen.
Jeg har udeladt mange detaljer, da dette emne, ellers bliver for kompliceret. Hvis du ønsker en komplet oversigt, kan jeg anbefale W3C CSS standard, samt min CSS links side. Derudover har HTML.dk en udemærket begynderguide.

Hvert element på en side, er en firkantet box som består af indhold, omkranset af padding, en border samt marginer,
Nedenstående illustration viser disse forskellige dele:

= Margen       = Border     = Padding     = Indhold

Marginer er altid transparente. Borders (rammer) kan styles på forskellig vis. Sætter du background indstillinger på et element, påvirker det området indenfor border inklusiv padding og indhold. (På tegningen ovenover er padding vist i den lyse grå, udelukkende for at gøre opmærksom på at den er der).

Marginer, borders og padding skal ikke nødvendigvis defineres, men hvis du ønsker at beregne position og størrelse, kan det ofte anbefales at give dem en default-width på 0. Forskellige widths kan sættes på hver enkelt side (top, right, bottom og left). Marginer kan desuden også have negative værdier.

Width og height på hver box er lig med højde og bredde på den ydre margin box. OBS! det er ikke nødvendigvis det samme som width og height på Indholds-området.

Dvs. er din ydre box 200px i bredden og 400px i højden, kan du ikke have en box inden i der er 400px i breden og 600px i højden.
MEN du kan godt placere en box inden i den ydre box, der f.eks. kun er 30px i bredden og 300px i højden.

En box kan indeholde x antal andre boxe, hvorved der oprettes et hieraki. Placeringen af disse boxe afhænger helt af hvordan de er kodet til at skulle placeres i forhold til hinanden. Browserens vindue er så rod-elementet i dette hieraki.

Box typer
Der findes 2 boxtyper, block og inline. Block boxe oprettes f.eks. via elementerne P, DIV eller TABLE. Inline boxe oprettes f.eks. via tags som B, I, SPAN og faktisk indhold som f.eks. tekst og billeder.

Der findes også andre former for boxe, som påvirker specielle elementer som list-elementer og tabeller.

Container block
Block boxe gør det muligt at style alle elementer, der er placeret i dem. Ex. denne simple side:

Der i CSS vil være bygget op på denne måde:

Se eksemplet her.

Positionering
Der findes 3 måder at positionere på i CSS2: normal, float og absolute.
Hver af disse har deres eget regelsæt. Hver enkelt box er positioneret vha. en af disse 3.

Normal flow er default. Det påvirker alle elementer, der ikke har fået specificeret position: absolute eller fixed og ikke er floated.

Her et eksempel med et billede placeret med float.

Siden er sidst opdateret, den 05-12-2006