Problème affichage CSS avec float
Résolu
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é :
Et voici le résultat affiché :
https://imageshack.com/
Merci d'avance pour votre aide et votre temps.
Gregg
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
6 réponses
-
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) -
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 -
Je me permets de relancer le sujet car je n'arrive pas à trouver de solutions...
Merci d'avance ! -
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
<div><div class="produit">Blabla</div><div class="produit">Blabla2</div></div>
<div><div class="produit">Blabla3</div><div class="produit">Blabla4</div></div>
...
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" -
tu met
<div class="clear"></div>
entre chaque ligne de deux produits
et en css.clear{ clear:both; float:none; } -
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 !
@++
