Float: left qui ne fonvtionne qu'a moitié ?

Bonjour, je suis entrain de créer une galerie pour un client mais j'ai une petite surprise inattendu lorsque je met plus de 8 images :


J'ai beau chercher pourtant je ne trouve pas.....
Vois si le css de chaque image ("boîte"):

.project{
	width: 160px;
	float: left;
	margin: 50px 25px 25px 25px ;
	display: inline; /* par sécurité mais inutile, sa ne change rien si je l'enlève... */
	position: relative; /* par sécurité mais inutile, sa ne change rien si je l'enlève... */
}

et le html

<div class="project">
																<div id="the_project">
	<a  href="http://www.xxxxxxxxx.com/wordpress/portfolio/etiam-eget-quam-in/"  class="project-picture"><img width="150" height="150" src="http://www.xxxxxxxxx.com/wordpress/wp-content/uploads/2012/02/Fotolia_1926744_L-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="soul mirror" title="soul mirror" /></a>
     <a href="http://www.xxxxxxxxx.com/wordpress/portfolio/etiam-eget-quam-in/" ><h4 class="project-name">Etiam eget quam in</h4></a>	
			</div><!-- end #the_project -->
			</div><!-- end .project -->

Théoriquement je ne devrai pas avoir de problème et avoir des lignes de 4 photos.....
Merci de votre aide
Et désolé mais je ne peut vous fournir de version en ligne mais je peut vous apporter des détails sup
Modifié par NeepNeep (21 Feb 2012 - 23:42)

Salut

Comment veux-tu placer les images ?

Ce serait peut être bien que tu nous mettes ton code complet.

Je pense qu'il suffirait de donner une hauteur minimale au bloc encadrant l'image et sa description, non ?

L'utilisation de display:inline-block convient parfaitement à ton cas.
Je te suggère la lecture de cette article pour plus de détail :
http://www.alsacreations.com/article/lire/1209-display-inline-block.html

Merci! la position diplay: inline-block fonctionne parfaitement mais un nouveau souci apparaît:



C'est le nom du projet lorsqu'il est sur 2 lignes qui modifie l'affichage et décale les vignettes......
Je ne trouve pas de solution....et min-height ne marche pas

Merci de votre aide
Modifié par NeepNeep (22 Feb 2012 - 13:54)

Résolu un vertical-align: top; à résolu mon problème
Modifié par NeepNeep (22 Feb 2012 - 15:10)

NeepNeep a écrit :
...et min-height ne marche pas

Et si tu définis la hauteur de la boîte avec height:200px (à régler selon l'affichage) ?

Je crois que sa ne marchait pas non plus mais là sa marche avec display: inline-block;