CSS-float-ominaisuuksien avulla voit kellua minkä tahansa tekstin oikealla puolella olevan kuvan, kuten kuvan oikealla puolella näkyy. Voit tehdä tämän Web-sivulla seuraavasti.

Tässä esimerkissä käytämme ulkoista CSS-tiedostoa. Käyttämällä ulkoista CSS-tiedostoa voit luoda kelluvan kuvan mille tahansa sivulle, joka sisältää linkin CSS-tiedostoon. Ulkoiset CSS-tiedostot helpottavat myös mahdollisten asetusten muuttamista tulevaisuudessa.

1. Luo CSS-tiedosto. Jos sinulla on jo CSS-tiedosto verkkosivullesi, muokkaa CSS-tiedostoasi ja lisää seuraava koodi.

2. Lisää seuraava koodi CSS-tiedostoon.

 .floatRight {float: oikea; margin-left: 20px} 

Vihje: Kelluvan lisääminen: vasemmalle kuva muuttuu tekstin vasemmalla puolella.

Jos haluat enemmän kuin yhden kuvan kelluvan oikealla puolella, lisää myös seuraava rivi CSS-tiedostoon.

 .floatRightClear {float: oikea; selvä: oikea; margin-left: 20px} 

3. Kun edellä mainittu koodi on luotu, tallenna CSS-tiedosto ja kutsu se jokaisesta HTML-sivusta käyttämällä alla olevaa esimerkkiä vastaavaa koodia. Esimerkissämme olemme nimenneet CSS-tiedoston style.css.

4. Lisää lopuksi mihin tahansa kuvaan, jota haluat uida astian oikealla puolella.