De division, ofwel het divje.

Bron: http://www.sceneone.nl/positionering/div.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

De division (engels voor 'onderdeel') beschrijft een deel van je pagina. Het is een afgesloten, omkaderd deel van je pagina. Een divje (=division) kan iedere afmeting hebben die jij wilt en kan zichzelf bevinden op iedere positie die jij wilt.
Je kunt in zo'n box (=division) zo'n beetje alles kwijt wat je maar wilt: tekst, een afbeelding, een tabel, een list, een andere div, een form, etc.
Het divje is een block element.

CSS3/HTML5 Opmerking! - Ik behandel op deze plaats alleen de div. Met de komst van HTML5 zijn er echter een aantal elementen bijgekomen die van de div zijn afgeleid, zoals <article>, <section>, <header> en <footer>. Wil je daar meer over weten dan kun je dat hier nakijken: HTML5 Doctor

Zoals met de eigenschappen van alle html elementen beschrijf je ook de eigenschappen van een divje in je css:

CSS: #box1{
width: 200px;
height: 100px;
border: 2px solid #666;
background: orange;
text-align: center;
}

.p1{
font-weight: bold;
color: orange;
}

.p2{
color: #666;
}
HTML: <p class="p1">Omdat zowel de p als de div block elementen zijn zullen ze nooit op 1 regel staan.</p><div id="box1"><p class="p2">Ook al zet ik ze in de html wel op dezefde regel.<br />Wat wel kan is een p in een div zetten.</p></div>

bekijk het resultaat

Nog een voorbeeld:

CSS: #box1{
width: 200px;
height: 100px;
border: 2px solid #C00;
background: #999;
margin-bottom: 5px;
}

#box2{
width: 250px;
height: 188px;
background: url(../_img/voorbeeld_img.jpg) no-repeat 0 0;
}

.p1{
font-weight: bold;
color: black;
}
HTML: <div id="box1">De twee div's komen automatisch onder elkaar te staan: natuurlijke flow van de pagina.<br /> In box2 is in de css een afbeelding als background-image geplaatst.</div>
<div id="box2"></div>

bekijk het resultaat

En dit is natuurlijk nog maar het begin.........

De voorbeelden hierboven laten zien hoe je met behulp van div's stukjes van de content van je pagina kunt inkaderen en hoe je de natuurlijke flow van de pagina kunt laten bepalen waar wat komt te staan.
In de volgende onderdelen van dit hoofdstuk zullen we zien hoe je de positionering van de div's naar je hand kunt zetten. Hoe je handig gebruik kunt maken van de flow van de pagina, of hoe je een division geheel of gedeeltelijk uit die flow kunt halen en ze hun eigen eigenschappen mee kunt geven.

naar het begin van de pagina