Lectori Salutem!

In CSS kom je regelmatig div's tegen genaamd container of wrapper. Soms kom je ook beide tegen in een CSS-document. Ik heb wel een vermoeden waartoe ze dienen: ze bieden een mogelijkheid om meerdere elementen in één keer te positioneren. Het is me echter nog niet duidelijk wat nu precies het verschil is tussen een container cq. een wrapper. Ik heb het idee dat een container over het algemeen gebruikt wordt voor 'grotere' stukken code, en een wrapper voor het kleinere werk, zoals een menu of footer. Klopt dit?

En soms zie je ook dat de container even groot is als de body, dus zo:

<html>
    <head>
            <title>Test</title>
    </head>
    <body>
            <div id="container">
                    Bla bla...complete layout binnen deze div.
            </div>
    </body>
</html>


Maar waarom zou je in zo'n geval niet de body zelf gebruiken om te positioneren?

Ik weet 't, het is vast mierengeneuk maar ik ben gewoon benieuwd naar het idee achter containers en wrappers :)
Het is inderdaad wat je denkt; je kunt door middel van een wrapper in 1 keer de inhoud positioneren. Stel dat ik een container div heb met wat headers en wat alinea's er in. Ineens wil ik de padding veranderen. Zoals het hoort volgens het W3C heeft dat onmiddellijk invloed op de breedte van de buitenste div.

De handigste oplossing is dan een wrapper div. Vooral als je verschillende container divs op je pagina hebt die allemaal een andere padding moeten. De container divs geef je dan hun eigen id, en de wrapper div een class.

In je CSS ben je nu heel flexibel, want:

wil je alleen een specifieke container div, dan doe je

div#container1

wil je de padding van alle wrappers aanpassen dan doe je

div.wrapper

en wil je een specifieke wrapper binnen een specifieke container pakken dan doe je

div#container3 div.wrapper

Reageren