[Résolu] Float et retour à la ligne auto

Bonjour,

j'ai un soucis avec les float et les retours à la ligne auto des éléments...je m'explique.

Imaginons 4 div en float left, la div parent ne pouvant en faire tenir que 3 sur une ligne, la 4ème div, ne pouvant se mettre à coté des autres, faute de place, revient seule à la ligne se mettre sous la 1ère div.

Mon problème est donc que si par exemple ma 2ème div est plus haute que les autres, et bien la 4ème div ne viendra pas sous la 1ère mais reste sous la 3ème div, bloqué par les quelques pixels qui est en plus sur la 2ème div

voici le CSS de ma div :

#liens article.lien{
	float: left;
	width: 175px;
	min-height: 110px;
	border-bottom: 1px solid #cbcbcb;
	color: #666;
	font-size: 0.75em;
	margin: 7px;
	line-height: 1.25em
} 

auriez vous une idée, voire une solution, du pourquoi la 4ème div ne revient pas et reste bloquer à cause de la deuxième plus grande.

d'avance grand merci !!!!!
Modifié par gwereg (17 Jan 2014 - 15:31)

Bonjour,

moi je te dirais de mettre

clear:both; 

à ta 4 ème div comme ça elle ne s'occupe pas cette contraintes.

il y a un truc aussi avec les foatant, c'est qui ne peuvent pas être inférieure en placement que les floatant situé en amont, comme dans ton exemple par exemple et ton histoire de div 2.

tu devrais lire les deux articles sur les float :

http://www.alsacreations.com/article/lire/972-float-le-grand-bluff.html
http://www.alsacreations.com/article/lire/7-depassement-flottants-css.html

merci pour ta réponse et tes conseils...je vais regarder ça !
Modifié par gwereg (17 Jan 2014 - 16:09)

salut,
ou bien faire beaucoup plus simplement en passant par "display:inline-block" qui est fait pour ça.

merci Zelalsan, ta solution est parfaite...pourquoi n'y ai-je pas pensé avant ?