Positioneren met CSS float
Float is een krachtige CSS-eigenschap waarmee je HTML-elementen kunt positioneren en uitlijnen. Wij leggen je uit hoe dit werkt.
Inleiding
Float kan op heel veel manieren gebruikt worden. Het is handig bij het uitlijnen van een enkele afbeelding, maar je kunt er ook je hele website mee vormgeven. Laten we beginnen met een simpel voorbeeld: het uitlijnen van een afbeelding.
Afbeeldingen uitlijnen
Vaak zie je op websites dat een afbeelding zo uitgelijnd is, dat de tekst er mooi om heen loopt. Dit kan met float. Hierdoor wordt de afbeelding een zwevend element: we laten het als het ware in de pagina zweven, en de andere elementen (bijvoorbeeld tekst), vouwen zich er netjes om heen.
Float kun je de waarde left of right meegeven. Dit bepaalt of het element aan de linker- of rechterkant wordt uitgelijnd. Nu een voorbeeldje voor een afbeelding.
Divs positioneren met float
Je kunt float ook gebruiken voor het positioneren van divs op je website.
Div is een afkorting van division. Letterlijk vertaald in het Nederlands betekent dit sectie. Een div is dus een sectie van een HTML-document die je een bepaalde vormgeving kunt geven.
Laten we beginnen met een voorbeeldje. Zoals je zal zien staan div1 en div2 naast elkaar, en wordt div3 op een nieuwe rij geplaatst.
In sommige gevallen hebben we naast float ook de CSS-eigenschap clear nodig. Met deze eigenschap kunnen we aangeven aan welke kanten van een element geen zwevende elementen worden toegestaan. Deze eigenschap kan de waarden left, right of both meekrijgen.
Laten we een voorbeeldje geven. Je ziet dat div1 en div2 op één lijn worden weergegeven. Omdat bij div3 clear op left staat, worden er aan de linkerkant geen zwevende elementen toegestaan. Daardoor wordt het element op een nieuwe lijn geplaatst.
Voordelen en nadelen
De manier van positioneren die we bespreken in dit artikel is erg flexibel. Als het moet kun je vrij gemakkelijk elementen aan je website toevoegen. Dit kan heel handig zijn, vooral voor grotere websites. Soms kan het echter ook handig zijn om elementen op een meer precieze manier een plek te geven. Hoe dat werkt, lees je in ons artikel Divs positioneren met CSS.
Slot
Op deze manier kun je afbeeldingen uitlijnen en divs positioneren. In het artikel divs opmaken leer je hoe je divs een likje verf kunt geven.
