Over containers & wrappers
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="container">
Bla bla...complete layout binnen deze div.
</div>
</body>
</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 :)
Gesponsorde koppelingen:
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
