Nehalennia informatica, positioneren met float

Het plaatsen van een plaatje (of een ander element) naast tekst, links of rechts, waarbij het plaatje door de tekst omsloten lijkt, is met behulp van CSS zeer makkelijk op te lossen.
Een voorbeeld zegt vaak meer dan duizend woorden. In onderstaande tekst zijn daarom twee plaatjes opgenomen die links- en rechts-gefloat zijn.
Het plaatje links is voorzien van een speciale class voor het tonen van afbeeldingen 'links' naast de tekst. Het plaatje rechts op een vergelijkbare manier (zonder border).
De CSS-codes:

img.left { float: left; margin: 0.5em 1em 1em 0; 
           border: 1px solid #999; clear: left; }
img.right { float: right; margin: 0.5em 0 1em 1em; 
           border: 0px solid #999; clear: right; }

En in de HTML-code gebruik je:

<img src="plaatje.jpg" alt="Voorbeeld CSS plaatje floaten" 
           title="Rechts naast de tekst" class="right">

---

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus id erat. Vestibulum a leo. Sed velit lacus, sagittis at, auctor eu, mollis sit amet, urna. Aenean eleifend risus. Donec elit sapien, interdum sed, vestibulum a, hendrerit ac, urna. Aenean cursus. Phasellus tristique libero.Donec nec ipsum vel lorem ornare sollicitudin. Sed ornare augue quis arcu. Nullam non erat tempus diam luctus tempus. Ut pharetra fermentum ligula. Nam dolor. Praesent tincidunt consequat sem. Fusce sed libero. Etiam at nibh ac nibh tristique vestibulum. Morbi euismod tristique ante. Fusce quam wisi, accumsan quis, mollis at, sodales sed, augue. Suspendisse potenti. Nulla eget orci non elit mollis dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Praesent tincidunt consequat sem. Fusce sed libero. Etiam at nibh ac nibh tristique vestibulum. Morbi euismod tristique ante. Fusce quam wisi, accumsan quis, mollis at, sodales sed, augue. Suspendisse potenti. Nulla eget orci non elit mollis dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus id erat. Vestibulum a leo. Sed velit lacus, sagittis at, auctor eu, mollis sit amet, urna. Aenean eleifend risus. Donec elit sapien, interdum sed, vestibulum a, hendrerit ac, urna. Aenean cursus. Phasellus tristique libero.Donec nec ipsum vel lorem ornare sollicitudin. Sed ornare augue quis arcu. Nullam non erat tempus diam luctus tempus. Ut pharetra fermentum ligula. Nam dolor.