Floating elements

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

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

We hebben tot nu toe twee mogelijkheden voor positionering besproken: absoluut- en relatief positioneren. We hebben gezien dat beide opties hun voordelen, maar zeker ook hun nadelen hebben. Die nadelen zitten 'm er met name in dat elementen in meer (absoluut) of mindere (relatief) mate uit de flow van de pagina getrokken worden.
Een pagina wordt met deze manier van positioneren een nogal statisch geheel. Niet zo'n probleem bij kleine, statische websites waarbij je op voorhand precies weet hoeveel content je hebt en waarvan je weet dat er in de toekomst niet zoveel meer aan gewijzigd zal hoeven worden.

In het geval van een grotere website, waar je wat flexibiliteit in je layout in wilt bouwen, kom je niet meer weg met deze statische oplossingen.

Wat dan wel?

We kennen in css de eigenschap float. Hiermee komen we een eind verder, vooral omdat we ook de eigenschap clear kennen.
De combinatie van die twee eigenschappen geeft ons een paar mooie flexibele mogelijkheden.

De eigenschap float kent de waarden: left, right en none.
De eigenschap clear kent de waarden: left, right, both en none.

In feite wordt een element wat de eigenschap float krijgt ook weer gedeeltelijk boven de flow van de pagina uitgetild. Op een soortgelijke manier waarop dat ook gebeurt bij relatief positioneren: de elementen die in de html structuur ná het 'zwevende' element komen herkennen het 'zwevende' element niet meer als onderdeel van de flow van de pagina.

Maar in dit geval hebben we daarvoor twee mogelijke goede oplossingen:

Oké, genoeg gelul. Een voorbeeld:

CSS: div#box1{
background-color: black;
width: 100%;
height: 75px;
}

div#box2{
background-color: red;
float: left;
width: 15%;
height: 200px;
}

div#box3{
background-color: green;
float: left;
width: 70%;
height: 200px;
}

div#box4{
background-color: silver;
float: left;
width: 15%;
height: 200px;
} HTML: <div id="box1">box 1</div>
<div id="box2">box 2</div>
<div id="box3">box 3</div>
<div id="box4">box 4</div>

bekijk het resultaat

Ik ga er vanuit dat je de mogelijkheden herkent op het moment dat je bovenstaand voorbeeld bekeken hebt. Je hebt hier een volledig flexibele 3-koloms layout voor je pagina.
Omdat box2, -3 en -4 zwevende elementen zijn gedragen ze zich niet meer helemaal als block elementen en ze zijn gedeeltelijk uit de flow van de pagina gehaald.

Dit werkt alleen maar bij zwevende elementen onderling. Zou bijvoorbeeld box3 geen zwevend element zijn dan werkt de hele magic niet meer:

CSS: div#box1{
background-color: black;
width: 100%;
height: 75px;
}

div#box2{
background-color: transparent;
float: left;
width: 15%;
height: 200px;
}

div#box3{
background-color: green;
width: 70%;
height: 200px;
}

div#box4{
background-color: silver;
float: left;
width: 15%;
height: 200px;
} HTML: <div id="box1">box 1</div>
<div id="box2">box 2</div>
<div id="box3">box 3</div>
<div id="box4">box 4</div>

bekijk het resultaat

Wat gebeurt er?

Er gebeuren eigenlijk een paar dingen:

Ik zou hier nog pagina's lang over kunnen uitwijden om te proberen het een en ander te verklaren. Dat ga ik niet doen. Ik zou zeggen probeer er zelf eens wat mee, zodat je gaat begrijpen hoe het principe van de floating elements werkt en wat de voordelen zijn.

Wat ik nog wel ga doen is een voorbeeld geven en bespreken waarbij ik de eigenschap 'clear' ga gebruiken:

CSS: div#box1{
background-color: black;
width: 100%;
height: 75px;
}

div#box2{
background-color: red;
float: left;
width: 15%;
height: 300px;
}

div#box3{
background-color: green;
float: left;
width: 70%;
height: 200px;
}

div#box4{
background-color: silver;
float: left;
width: 15%;
height: 200px;
}

div#box5{
background-color: purple;
clear: left;
float: right;
width: 75px;
height: 50px;
} HTML: <div id="box1">box 1</div>
<div id="box2">box 2</div>
<div id="box3">box 3</div>
<div id="box4">box 4</div>
<div id="box5">box 5</div>

bekijk het resultaat

Ik heb box2 wat hoger gemaakt zodat je goed kunt zien wat er gebeurt. Box5 laat ik floaten naar rechts en geef ik de eigenschap 'clear: left'. Daarmee zeg ik dus tegen box5: "Let op, aan je linkerzijde bevinden zich zwevende elementen. Negeer ze niet, maar behandel ze alsof ze op een normale manier in de flow van de pagina zitten."
Op deze manier beweegt box5 altijd mee met de hoogte van óf box2, óf box3, óf box4. Afhankelijk van welke van die drie boxen het hoogste is:

CSS: div#box1{
background-color: black;
width: 100%;
height: 75px;
}

div#box2{
background-color: red;
float: left;
width: 15%;
height: 200px;
}

div#box3{
background-color: green;
float: left;
width: 70%;
height: 300px;
}

div#box4{
background-color: silver;
float: left;
width: 15%;
height: 200px;
}

div#box5{
background-color: purple;
clear: left;
float: right;
width: 75px;
height: 50px;
} HTML: <div id="box1">box 1</div>
<div id="box2">box 2</div>
<div id="box3">box 3</div>
<div id="box4">box 4</div>
<div id="box5">box 5</div>

bekijk het resultaat

Er zijn nog zoveel voorbeelden te geven, maar zoals al eerder gezegd: probeer zelf maar eens wat uit met deze eigenschappen.
En probeer dit ook eens in combinatie met het aanbrengen van margins en paddings voor de fine tuning van de boxen en de inhoud van die boxen.
Je zult zien dat je de elementen en inhoud tot op de pixel nauwkeurig daar kunt krijgen waar je het hebben wilt.

naar het begin van de pagina