Aligner une image et du texte à l'aide de la propriété float

• Tout élément flottant doit être déclaré en premier dans le flux, c'est-à-dire dans la lecture de haut en bas du code HTML ;
• Les images déclarées dans le code HTML, qui n'ont pas donc vocation à être des images de fond, doivent contenir l'attribut alt. Cet attribut est le texte alternatif qui doit apparaître si l'image n'est pas visualisée. Il a donc un rôle important pour l'accessibilité, et pas pour le référencement !
  * Si l'image est purement décorative, le contenu du alt doit être vide ;
  * Si l'image est porteuse d'information, le contenu du alt doit être pertinent et reprendre cette information.

<p class="flotte">
  <img src="images/new.png" alt="Nouveau !" />
</p>
<p>
  Toutes les nouveautés, rien que des nouveautés.
</p>

Bien sûr, ce code tout seul positionne l'image au dessus du texte, et puis c'est tout...Mais en indiquant un float:left dans la classe flotte déclarée dans le paragraphe contenant l'image, celle-ci va dégager un espace libre sur sa droite (puisqu'elle flotte à gauche) où le texte pourra se placer.

Remarque : si vous n'avez pas de notions sur les classes CSS, mieux vaut lire ce tutoriel avant de continuer.

.flotte {
  float:left;
}

Résultat attendu :

Voir le résultat.

Et là vous allez me dire : "C'est bien joli votre truc, mais le texte il est tout en haut de l'image, ça ne le fait pas."

Nan, mais bien sûr... Si le texte occupe un espace moins haut que la hauteur de l'image (ici 65 pixels) l'alignement peut paraître mal fait. Cela peut se régler de différentes façons.

Si le texte est très court, on peut appliquer une hauteur de ligne égale à la hauteur de l'image, par exemple, à l'aide de line-height. Le texte sera ainsi naturellement aligné au milieu de cette hauteur (attention, ceci ne sera donc pas valable si vous avez plusieurs lignes car elles vont être toutes espacées de la hauteur de ligne déclarée. Mais cela ne sera pas forcément nécessaire non plus...).

<p class="flotte">
  <img src="images/new.png" alt="Nouveau !" />
</p>
<p style="line-height:65px;">
  Toutes les nouveautés, rien que des nouveautés.
</p>

Résultat attendu :

Voir le résultat.

Pour aligner son image cette fois à droite, on ne change rien au code HTML. C'est juste dans la feuille de style qu'il faut déclarer un float:right à la place du float:left.

.flotte {
  float:right;
}

Résultat attendu :

Voir le résultat.

Bien entendu, si vous désirez bénéficier des deux options, il faudra deux noms de classes différents et appliquer celle qui ira bien selon vos désirs.

Le flottement de l'image persiste tant que le texte n'a pas dépassé la hauteur de l'image. Pour annuler cet effet, il faut indiquer un clear:both au premier élément que l'on veut voir dépasser ce phénomène. Cet élément passera donc à la ligne, sous l'image, quelque soit la hauteur de celle-ci.