Pomocou vlastností CSS float môžete float ľubovoľný obrázok napravo od akéhokoľvek textu, ako je možné vidieť na obrázku vpravo od tohto textu. Ak to chcete urobiť na svojej webovej stránke, postupujte podľa nasledujúcich krokov.

V tomto príklade budeme používať externý súbor CSS. Pomocou externého súboru CSS môžete vytvoriť plávajúci obrázok na ľubovoľnej stránke, ktorá obsahuje prepojenie na súbor CSS. Externé súbory CSS tiež uľahčujú zmenu nastavení, ktoré chcete v budúcnosti upraviť.

1. Vytvorte súbor CSS. Ak už máte súbor CSS pre svoju webovú stránku, upravte súbor CSS a pridajte nasledujúci kód.

2. Do súboru CSS pridajte nasledujúci kód.

 .floatRight {float: doprava, margin-left: 20 pixelov} 

Tip: Pridanie float: left by urobilo obraz plávajúcim na ľavej strane textu.

Ak chcete mať viac ako jeden obrázok plávajúci vpravo, pridajte do súboru CSS aj nasledujúci riadok.

 .floatRightClear {float: vpravo; jasné: doprava, margin-left: 20 pixelov} 

3. Po vytvorení vyššie uvedeného kódu uložte súbor CSS a zavolajte ho z každej stránky HTML pomocou kódu podobného nižšie uvedenému. V našom príklade sme nazvali CSS súbor style.css.

4. Nakoniec pridajte na ľubovoľný obrázok, ktorý chcete plávať na pravej strane kontajnera.