Retour à la ligne avec des float, mise en forme

Bonjour,

J'ai un container qui contient des objets:

<div class="container">
    <div class="item">
        ...
    </div>
    <div class="item">
        ...
    </div>
    <div class="item">
        ...
    </div>
    <div class="item">
        ...
    </div>
</div>

Mon container à une largeur fixe, mes items aussi et j'applique un float pour les mettre à un à coté de l'autre et aller à la ligne automatiquement:

.container {width: 500px; overflow: hidden;}
.item {width: 250px; float: left;}

Le soucis c'est que mes items ont des hauteurs variables, du coup ça me fait ce genre de bug:




Comment faire pour que mes objets se placent tout à gauche une fois aller à la ligne?

J'avais trouvé en ajoutant une <div style="clear: both;"> tout les x items, mais ça m'oblige à modifier mon html, et dans ce cas ici je ne peux pas...

Alors comment faire? avez-vous une solution?

Merci d'avance

Il faut que tu ajoutes une hauteur fixe aux items:

.item {width: 250px; height:200px; float: left;}

A+

Bonjour,

Merci pour votre réponse, mais...comme dit dans mon post, la hauteur des mes items sont variables...donc je ne peux pas figé la hauteur....

J'ai essayé avec des inline-block, ça fonctionne mais pas sous IE8, alors que dans un article => http://www.alsacreations.com/article/lire/1200-10-techniques-avancees-et-secrets-de-css2.html

Ils disent clairement que c'est compatible IE8...

Voici le code CSS pour inline-block (le html est le même que plus haut):

.container {width: 500px;}
.item {width: 250px; margin-right: -4px; vertical-align: top; display: inline-block;}

Une idée de pourquoi ça ne fonctionne pas sous IE8?

Merci d'avance.