Tot besluit zijn op deze pagina wat lay-outmogelijkheden toegepast. De CSS-regels vindt u boven in het CSS-bestand van deze pagina.
De hele body is in een div geplaatst, ook wel wrapper genoemd. Met die wrapper kan de totale paginabreedte worden beperkt en kan de inhoud worden gecentreerd in het browservenster.
Vervolgens heeft de afbeelding in de header float: left gekregen, zodat afbeelding en paginakop netjes naast elkaar komen te staan.
Daarna is clear:both ingesteld op het navigatiemenu, zodat dit onder de paginakop komt te staan. Het menu en de header stonden te dicht op elkaar en daarom is op de header een ondermarge ingesteld. Hierbij is de kindselector gebruikt om aan te geven dat die marge alleen geldt voor een header die een kind is van #wrapper, anders zouden alle headers in het document een ondermarge krijgen en dat is niet de bedoeling.
Het loopt als een rode draad door alles wat HTML is: structuur en betekenis. Die zijn in dit document prima in orde (bekijk de outline!), maar voor de lay-out was toch een kleine aanpassing nodig. Het was van het begin af aan de bedoeling om het blokje met gerelateerde links (de aside) rechts naast het artikel te plaatsen. Semantisch is de aside een onderdeel van het betreffende artikel en zo is het document ook opgebouwd. Maar dat maakt het erg lastig om de aside los te plaatsen van de artikeltekst. Daarom is de inhoud van het artikel, het deel vanaf header tot aside (niet tot en met!), in een extra div geplaats, de articlewrapper. Nu is het mogelijk om de artikeltekst naar links te floaten en het blokje met koppelingen ernaast te laten schuiven.
Bekijk voor de uitwerking de HTML-code en de stylesheet.
Voor de lay-out is nog een geweldige CSS3-optie in ontwikkeling: flexbox. Er kan al mee geƫxperimenteerd worden, want de belangrijkste browsers ondersteunen de optie, hoewel niet zonder prefix.