Float like a butterfly, sting like a bee.
—Muhammad Ali
CSS float en position eigenschappen
Belang in CSS
Tot enkele jaren geleden namen float en position een belangrijke plaats in in een cursus CSS. Sinds kort beschikken we echter
over veel betere manieren om een lay-out in CSS te implementeren (flex en grid, daarom dat die ook eerder uitgelegd werden). Voor
specifieke doelen kunnen float en position nog nuttig
zijn. Daarom leggen we beiden hier kort uit.
Float
Een afbeelding floaten
Volgende situatie komt af en toe voor: je wilt de tekst rond een afbeelding laten gaan, als volgt:
De HTML-code hiervan is:
<!DOCTYPE html>
<html lang="nl">
<head>
…
<link rel="stylesheet" href="floatstijl.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi …</p>
<p><img class="links" src="paraplu.jpg" width="200" height="300"
alt="kleurrijke paraplu's">Lorem ipsum dolor sit amet …</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat alias eveniet …</p>
</body>
</html>
Drie alinea's (p) volgen elkaar op. De tweede alinea bevat
een afbeelding.
De CSS-code die voor deze lay-out zorgt is:
body {
max-width: 30em;
margin: 0 auto;
font-family: "Trebuchet MS", sans-serif;
line-height: 1.45;
}
.links {
float: left;
margin: 10px 10px 10px 0;
}
Een woordje uitleg bij bovenstaande code. In de HTML geven we de
afbeelding een class="links". Je mag die klasse gelijk welke
naam geven, maar toch liefst een naam die de betekenis verduidelijkt. De
CSS laat alle elementen met deze klasse floaten naar de uiterst linkse
positie mogelijk, dus tot tegen de rand van de body. De rest
van de p en alle volgende worden aan de linkerkant weggeduwd door
deze afbeelding.
Het effect is dat alles rond deze afbeelding gaat. Van zodra de
tekstregels onder de afbeelding komen, staan ze terug tegen de linkerkant.
Vanzelfsprekend voorzie je rond een gefloate afbeelding voldoende ruimte
(hier via margin). Tekst die tot tegen een afbeelding komt is
echt niet mooi.
Als je even logisch nadenkt, hoe zou je dan volgende lay-out kunnen bekomen?
class="rechts".
In de CSS voeg je dan volgende regels toe. Klein detail: let op de
aangepaste margin.
.rechts {
float: right;
margin: 10px 0 10px 10px;
}Clear
Soms wil je vermijden dat iets aan de linkerkant (of rechterkant) wordt weggeduwd door een gefloat voorwerp dat er naast staat, zoals bvb de ongelukkige plaats van de titel in volgende pagina:
Daarom dat je vaak de eigenschap float vergezeld ziet van de eigenschap
clear. We voegen volgende CSS-regel toe:
h2 {
clear: left;
}Deze regel zegt “alle h2-elementen mogen aan de linkerkant niet worden weggeduwd”. Het effect is dat de titel dan onder de gefloate afbeelding komt te staan:
Inline of blokelementen floaten
Je bent niet beperkt tot het floaten van een afbeelding. Elk element is
toegestaan. Er is één belangrijke voorwaarde: je moet de width van het element altijd meegeven. Bij de img hierboven was het
niet nodig, omdat we de afmetingen van de afbeelding in de attributen in HTML
hadden bepaald. In het volgend voorbeeld floaten we een citaat, gemaakt met
een blockquote.
Probeer zelf de HTML- en CSS-code te schrijven om deze pagina te bekomen.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Een element floaten</title>
<style>
body {
max-width: 30em;
margin: 0 auto;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
line-height: 1.45;
}
blockquote {
margin: 10px 10px 10px 0;
padding:10px;
line-height: 1.1;
width: 5em;
float: left;
font-family: georgia, serif;
font-style: italic;
font-size: 3rem;
color: #444;
border-top: 3px solid #aaa;
border-bottom: 3px solid #aaa;
background-color: #eee;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem
doloremque vel ducimus, amet velit non dolor voluptas nemo eius. Quo!
</p>
<blockquote>“To be or not to be, that's the question!”</blockquote>
<p>
Facilis non a sapiente quos rerum similique itaque autem nostrum tempore
at repudiandae exercitationem voluptatem, quas fuga omnis aliquid nesciunt
unde maiores.
</p>
<p>
Quam repellendus fugit iste ex corrupti hic nemo quos officia unde
veritatis culpa, vitae mollitia error cupiditate asperiores beatae quo.
Officia sit illo soluta ipsam, quisquam architecto perspiciatis maiores
nisi harum aperiam vero delectus eum veritatis et adipisci nobis. Velit,
ad earum.
</p>
</body>
</html>
Position: absolute (en relative)
Je weet ondertussen dat ik fan ben van Kevin … In volgend filmpje legt
hij uit hoe position: absolute werkt.
Zoals hij in het bovenstaand filmpje meermaals beklemtoont: elementen absoluut positioneren moet de uitzondering zijn. Je kan het gebruiken om een element op een specifieke plaats binnen een container te plaatsen. Maar het is niet geschikt om de algemene lay-out van je site te bepalen.
In onderstaande – wat langere – film toont Kevin Powell een praktische
toepassing waar position: absolute zinvol is.