Ali bi ob sliko radi dodali še besedilo? To naredite tako:
img.lebdi-desno {
float: left;
}
Zdaj se bo besedilo pojavilo na desni strani slike.
Če bi radi dodali besedilo na levo stran slike, napišemo:
img.lebdi-levo {
float: right;
}
Ko to naredimo, ugotovimo, da brskalnik postavi besedilo čisto zraven slike. To lahko popravimo, če sliki dodamo rob. V spodnjem primeru smo dodali rob na desno in na spodnjo stran slike.
img.lebdi-desno-rob {
float: left;
margin: 0 .5em .5em 0;
}
Pogosto se zgodi, da je besedilo tako kratko, da ne zavzame vsega prostora ob sliki. Če bi v tem primeru dodali nov odstavek, bi se tudi ta izpisal poleg slike. Če tega nočemo, moramo brskalniku sporočiti, da naj od tod naprej besedila ne zapiše ob sliko. Definiramo nov razred:
p.brez-lebdenja {
clear: both;
}
Spodnja koda HTML pokaže, kako uporabimo novi razred.
<img class="lebdi-desno-rob" src="slika.jpg">
<p>Tukaj se nahaja besedilo ob sliki.</p>
<p class="brez-lebdenja">Tukaj je besedilo pod sliko.</p>