Voilà j'ai un petit problème avec un site de smiley concernant la mise en page.
Voici le site en question -> http://www.mangaclub.ch/urd/zonesmiley/default.asp
 
Le problème actuel:
Parfois, au lieu de se mettre sur une seule ligne modifiable en hauteur, des div vignette (c'est à dire cadre saumon) s'imbriquent les unes aux autres.
 
Solution testée:
Fixer la taille du div. Le problème est que 1. c'est moche (accessoire) 2. l'image a une taille variable, et Moz le gère mal.
 
J'ai donc besoin de vos avis éclairés et experts, je ne sais pas quoi faire pour remplacer le patée que j'ai pour l'instant. Merci d'avance pour vos suggestions  

Ouais on touche là aux limites des CSS dans leurs spécifications actuelles.
 
Les flottants c'est bien quand on a 2-3 blocs à placer cote à cote mais quand il y en a beaucoup et qu'ils ont des hauteurs différentes ça devient vite le bazard.
 
Une solution pourrait être d'utiliser :
 

 
(et donc virer le float)
 
inline-block, ça revient à aligner des blocs sur une ligne de texte comme du texte normal.
 
Ca fait partie des CSS 2.1 mais vu qu'elles ne sont pas encore des recommendations "officielles", Mozilla ne supporte pas cette propriété autrement qu'avec :
 

 
Par contre IE 6 s'en sort très bien.
 
Donc la solution ultime et de déclarer les 2 :
 

 
 
 
Voilà sinon il y a la solution de faire un tableau, ou alors comme tu l'as dit, de fixer la hauteur (éventuellement, ajoute un display: table-cell; pour que le bloc s'agrandisse si le smiley a une taille supérieure à celle qui a été spécifiée)

j'ai l'impression que le display: inline-block; incite chaque bloque à aller à la ligne (voir résultat actuel)
j'ai un peu tout essayé et trifouillé, mais rien n'amène de résultat convaincant  

si jamais en attendant j'ai fixé la taille de la div, au pire j'en resterai à cette solution

Mouais effectivement ça foire avec inline-block;
 
Bon essaye de combiner les propriétés suivantes :
 

 
Le table-cell suffirait pour Mozilla, mais IE s'en fiche, d'où le float. Le height sert aussi à IE pour que les cellules aient toutes la même hauteur.

si je mets comme ca:
 

sous ie pas de problème, la meme chose si j'enlève display:table-cell.
sous moz... il va pas à la ligne, donc tout sur une ligne et pas de marge.
je laisse le résultat avec cette classe css là pour que tu voies.

Ben table-cell ça fait en sorte que tes cellules s'alignent comme un tableau, donc pas de retour à la ligne Il faut le faire soit même...
 
Donc le plus simple c'est effctivement de rester de rester avec les flottants et de définir une hauteur suffisante.
 
Il n'y a pas de solution parfaite à ce que tu veux faire malheureusement

hum dommage.
je vais garder la solution du fixage de la hauteur.
Si l'on voulait faire en sorte qu'il spécifie la taille des images uniquement pour celles qui dépassent x, il faudrait utiliser des objets spécifiques je suppose?