In webpagina's zie je vaak dat er een plaatje of een blokje informatie naast de inhoud van een pagina staat. De inhoud gaat er dan automatisch omheen net zoals in een krant.
Dit gedrag kan je met de css float code voor elkaar krijgen.
Als je het element links van de inhoud wilt laten 'zweven' gebruik je float: left en voor de rechterkant gebruik je float: right. De hond hiernaast zweeft bijvoorbeeld aan de rechterkant.
Let er op dat het zwevende element voor de inhoud moet staan om de inhoud er netjes omheen te laten lopen.
img {
float: ;
}
<img src="ballon.png">
<h2>De rode ballon</h2>
Ik stuur je een brief aan een rode ballon.
Je bent nu zo ver.
Ik kijk naar de sterren.
En wou dat ik je bereiken kon.
Misschien ben je nu wel heel dicht bij de zon.
Zal de wind voor je waaien.
Mag je zwieren en zwaaien.
En drijven net als mijn ballon.
Zonder geluid komt hij nu naar je toe.
Als zit ik van binnen.
Je naam uit te schreeuwen.
Ik wil met je praten al weet ik niet hoe.
Mocht je hem vinden laat het dan even, heel even maar sneeuwen.
Wat gebeurt er als je de ballon in de HTML na de header zet? En wat als je deze na de tekst zet?
Wat gebeurt er als je de ballon aan de andere kant laat zweven? En als je de CSS weghaald?