Tekst en beeld in 1 kader met pseudo-selector :after

En truc die ik al jaren ken en me reeds vaak uit de nood heeft geholpen.

HTML

<div class="example">
<img src="gorgeous-red-dog.jpg">
>Kijk eens aan! Wat een mooie rode hond.
</div>

<style>
.example {border: 5px solid #c00; padding: 5px;}
.example img {float: left; margin-right: 5px;}
</style>

Kijk eens aan! Wat een mooie rode hond.

Nouja, toch niet helemaal wat ik verwacht had. Ik wil de rode kader ook rond het beeld en niet enkel rond de tekst.

Hoe los ik dit op?

Simpel, gebruik de pseudo-selector :after en voeg dit toe aan de CSS:

.example:after {content: ""; display: block; height: 0; clear: both;}

Kijk eens aan! Wat een mooie rode hond.

Ik ben 40+, met een gezonde internet verslaving. Gelukkig getrouwd en fiere vader van 2 dochters. Wil een kat in huis, maar mag niet. 🙁