Problème affichage CSS avec float
Résolu
Gregg78
Messages postés
54
Date d'inscription
Statut
Membre
Dernière intervention
-
Gregg78 Messages postés 54 Date d'inscription Statut Membre Dernière intervention -
Gregg78 Messages postés 54 Date d'inscription Statut Membre Dernière intervention -
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
A voir également:
- Problème affichage CSS avec float
- Affichage double ecran - Guide
- Problème affichage fenêtre windows 10 - Guide
- Windows 11 affichage classique - Guide
- Thunderbird problème affichage message - Forum Thunderbird
- Problème affichage facebook ✓ - Forum Facebook
6 réponses
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"
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"
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 !
@++
Encore merci pour votre temps !
@++
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)
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
https://imageshack.com/
Tu verrais une alternative ? Merci d'avance
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question