28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un petit soucis pour afficher ma liste de produit. Dans ma liste, chaque produit est représenté par son image et son libellé.


<div class="prod">
<a href="fiche_produit.htm"><img class="mini_prod" src="produit_1.jpg" /></a>
<h4><a href="fiche_produit.htm">Produit 1l/a></h4>
</div>


Je voudrais que chaque produit s'affiche à la suite des autres de la même façon que sur le site Textorm.

J'ai donc fait le CSS suivant :

#content div.prod
{
width: 110px;
float:left;
margin: 10px 10px 10px 0;
}

#content div.prod h4
{
text-align:center;
margin: 1px 0 0 0;
}

#content div.prod img
{
width: 110px;
border: none;
}


Mon problème, c'est que si le libellé du produit 1 est long (plus de 110px), le produit qui est sencé ce trouver en dessous se trouve décalé sous le produit 2 :

upload/10481-exemple.JPG

Si quelqu'un a une astuce ...

Merci d'avance.