Problème affichage CSS avec floatRésolu/Fermé

Question

Bonjour à toutes et tous, 

voilà mon problème, j'utilise une suite de DIV identiques avec float:left; afin d'avoir un listing de produits sur 2 colonnes or de temps en temps, j'ai un emplacement vide et je ne comprends pas d'où ca vient...

Voici le style utilisé : 

#produit {
	width:340px;
	position:relative;
	padding:0px;
	margin:0px 10px 20px 0px;
	float:left;
	border:1px solid red;
}

 
Et voici le résultat affiché :

https://imageshack.com/


Merci d'avance pour votre aide et votre temps.

Gregg

vinc · Answer

C'est simplement quand la hauteur d'un élément de droite est inférieure à celle de l'élément de gauche 

met une hauteur standard et ce sera réglé (height:75px; par exemple)

Gregg78 · Answer

Merci Vinc, cela évolue en effet mais j'ai maintenant un problème de superposition lorsque j'ai trop de texte...

https://imageshack.com/

Tu verrais une alternative ? Merci d'avance

Gregg78 · Answer

Je me permets de relancer le sujet car je n'arrive pas à trouver de solutions...
Merci d'avance !

vinc · Answer

Désolé j'avais oublié de surveiller ce sujet Il y a plusieurs solutions, notamment jouer avec l'attribut overflow, ce qui ne semble pas utile pour ton cas mais qui pourrait aider des gens avec une situation semblable, remplacer le height par un min-height, mais ça nécessiterais une astuce pour internet explorer (le web a suffisament d'explication pour cela), et je ne suis pas sûr du comportement, ça risque de te refaire un problème similaire au premier comportement, mais décalé vers le bas. Si le min-height ne fonctionne pas, tu pourrais faire deux colonnes de manière explicite (deux divs contenant chacune la moitié de ta liste de produits, placées l'une à coté de l'autre), ou encore faire des couples encapsulés dans des divs prenant toute la largeur, probablement la plus simple à mettre en oeuvre, car tu n'as pas à changer ton css : Au passage tu a mit ton style sur un id (#produit), tu devrait le mettre sur une classe (.produit), les ids sont censés êtres uniques dans un document html

Blabla

Blabla2

Blabla3

Blabla4

... Il y a une autre solution (encore ^^), c'est d'utiliser un positionnement absolu avec une classe pour les produits "pairs" et une classe pour les produits "impairs"

maka54 · Answer

tu met

entre chaque ligne de deux produits et en css .clear{ clear:both; float:none; }

Gregg78 · Answer

Merci pour vos réponses. En fait j'ai déjà trouvé : je vais utiliser le clear:both tous les 2 éléments avec un script PHP en modulo !

Encore merci pour votre temps !
@++

Problème affichage CSS avec float

6 réponses

Discussions similaires

Newsletters