Bonjour
Shanish !
Je te rassure, le problème ne vient pas du tout de la police de caractère choisie.
Par contre, je pense que tu ne vois pas le bug avec certaines polices parce-que celles-ci font que l'espace entre les blocs est plus important, ce qui (paradoxalement) ne va pas générer le "bug".
En fait, ce n'est pas un bug.
C'est parce-que tu as attribué la propriété
float: left;
à tes images. Ca fonctionne parfaitement, le soucis étant que si l'image dépasse la taille de ton bloc (ce qui est le cas), elle restera à flotter à gauche pour le bloc d'en dessous !
Donc le contenu du bloc suivant commence en décalé par rapport à celui du dessus, et ce phénomène se reproduit en cascade pour te faire ce soucis d'affichage.
Heureusement, la magie du CSS vient résoudre cela.
Il y a une propriété qui permet de stopper le flottement. Il s'agit de
clear
. C'est la chose à laquelle il faut penser quand on introduit des éléments flottant, pour éviter que le flottement ne se propage hors de leur conteneur.
Je te propose donc d'essayer de rajouter le CSS suivant :
- Code:
-
.pers ~ * {
clear: both;
}
Normalement, ça devrait résoudre ton soucis.
Concrètement, ça indique de stopper le flottement pour tout élément qui suit un élément ayant la classe
.pers
(tes conteneurs à toi en l'occurence).