Met behulp van de vlottereigenschappen van CSS kunt u elke afbeelding rechts van elke tekst laten zweven, zoals te zien is aan de afbeelding rechts van deze tekst. Om dit op uw webpagina te doen, volgt u de onderstaande stappen.

In dit voorbeeld gebruiken we een extern CSS-bestand. Door een extern CSS-bestand te gebruiken, kunt u een zwevende afbeelding maken op elke pagina met een koppeling naar het CSS-bestand. Externe CSS-bestanden maken het ook eenvoudiger om instellingen die u in de toekomst wilt aanpassen, te wijzigen.

1. Maak een CSS-bestand. Als u al een CSS-bestand voor uw webpagina heeft, bewerkt u uw CSS-bestand en voegt u de volgende code toe.

2. Voeg de volgende code toe aan het CSS-bestand.

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

Tip: float toevoegen: links zou de afbeelding aan de linkerkant van de tekst laten zweven.

Als u meer dan één afbeelding aan de rechterkant wilt laten zweven, voegt u ook de volgende regel toe aan het CSS-bestand.

 .floatRightClear {float: right; clear: right; margin-left: 20px} 

3. Sla, nadat de bovenstaande code is gemaakt, het CSS-bestand op en noem het vanuit elke HTML-pagina met behulp van dezelfde code als in het onderstaande voorbeeld. In ons voorbeeld hebben we CSS-bestand style.css genoemd.

4. Voeg ten slotte de afbeelding toe die u wilt laten zweven aan de rechterkant van de container.