Ved hjælp af CSS floategenskaberne kan du flyde et billede til højre for enhver tekst, som det kan ses med billedet til højre for denne tekst. For at gøre dette på din webside skal du følge nedenstående trin.

I dette eksempel bruger vi en ekstern CSS-fil. Ved at bruge en ekstern CSS-fil kan du oprette et flydende billede på en side, der indeholder et link til CSS-filen. Eksterne CSS-filer gør det også lettere at ændre eventuelle indstillinger, du måske vil tilpasse i fremtiden.

1. Opret en CSS-fil. Hvis du allerede har en CSS-fil til din webside, skal du redigere din CSS-fil og tilføje følgende kode.

2. Tilføj følgende kode til CSS-filen.

 .floatRight {float: højre; margin-left: 20px} 

Tip: Tilføjelse af float: venstre vil gøre billedet flyde på venstre side af teksten.

Hvis du vil have mere end et billede flydende til højre, skal du også tilføje følgende linje til CSS-filen.

 .floatRightClear {float: højre; klar: højre; margin-left: 20px} 

3. Når ovenstående kode er oprettet, skal du gemme CSS-filen og kalde den fra hver HTML-side ved hjælp af en kode, som ligner nedenstående eksempel. I vores eksempel har vi navngivet CSS-filen style.css.

4. Tilslut det til et billede, du vil flyde på højre side af beholderen.