Utilisez des <li> pour faire un tableau, un retour à la ligne ét

Bonjour à tous,

J'utilise un petit bout de code pour afficher la liste des amis d'un utilisateur donné sur mon site.

<ul id='friends'>
  {{début boucle}}
    <li>{{une image}}<p>{{user}}</p></li>
  {{fin boucle}}
</ul>

Malheuresement, j'ai un rendu étrange... avec un utilisateur qui reste ) gauche au lieu de revenir sagement à droite

Les css sont simples pourtant, j'ai certainement loupé quelque chose mais je bloque depuis quelques heures maintenant...

#friends {
	padding: 10px;
}

#friends li {
	float: left;
	width: 110px;
	text-align: center;
}

#friends li p {
	margin: 3px;
}

Je vous remercie par avance pour votre aide,

Bonne journée,
Pierre
Modifié par way66 (30 Sep 2008 - 09:36)

Bonjour,

way66 a écrit :
Les css sont simples pourtant, j'ai certainement loupé quelque chose mais je bloque depuis quelques heures maintenant...

Tu as en effet loupé quelques choses ... que le rendu correspond bien au fonctionnement des flottants.

"Romain David" se place là où il a de place et il en trouve juste en dessous "lapin2 tiiptop". Pour résoudre le problème dans ce contexte, c'est de fournir une hauteur et / ou une largeur suffisante à l'item (li) pour que chacun est les mêmes dimensions. Ce genre de construction est toujours problématique ...

Merci Yodaswii, c'est exactement ça... j'ai ajouté une condition sur la hauteur et cela passe parfaitement !

Bonne journée !
Modifié par way66 (30 Sep 2008 - 10:20)