En utilisant les propriétés float de CSS, vous pouvez placer n'importe quelle image à la droite d'un texte, comme vous pouvez le voir avec l'image à la droite de ce texte. Pour ce faire sur votre page Web, suivez les étapes ci-dessous.

Dans cet exemple, nous utiliserons un fichier CSS externe. En utilisant un fichier CSS externe, vous pouvez créer une image flottante sur toute page comportant un lien vers le fichier CSS. Les fichiers CSS externes facilitent également la modification des paramètres que vous souhaitez modifier ultérieurement.

1. Créez un fichier CSS. Si vous avez déjà un fichier CSS pour votre page Web, éditez votre fichier CSS et ajoutez le code suivant.

2. Ajoutez le code suivant au fichier CSS.

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

Astuce: Ajouter float: left rendrait l'image float sur le côté gauche du texte.

Si vous souhaitez que plusieurs images flottent à droite, ajoutez également la ligne suivante au fichier CSS.

 .floatRightClear {float: right; clear: droite. marge gauche: 20 pixels} 

3. Une fois le code ci-dessus créé, enregistrez le fichier CSS et appelez-le à partir de chaque page HTML à l'aide d'un code similaire à l'exemple ci-dessous. Dans notre exemple, nous avons nommé le fichier CSS style.css.

4. Enfin, ajoutez le à toute image que vous souhaitez faire flotter du côté droit du conteneur.