[resolu ] Margin-top s'applique pas

bonjour ou bonsoir )
j'ai un problème un margin-top s'applique pas.

dans une div j'ai

.meilleur-prix{width:317px; float:left; margin:20px 3px 0 }

<div  class="meilleur-prix left">
<div class="majuscul marg-bott-dix" > le meilleur prix </div>
             <img class="left" src=   "images/photo.jpg />

</div>

<div  class="meilleur-prix right">
<div class="majuscul marg-bott-dix" > le meilleur prix </div>
             <img class="left" src=   "images/photo1.jpg />

</div>

ce qui donne un titre en float left et une image dessous en float left
et a coté la même chose en float right

dessous je voudrais mettre du texte mais espacé mais la margin-top marche pas

<p class="majuscul marg-top-cinq clear"> les robots les mieux notes</p>

je joint une photo
Modifié par maca (09 Jul 2009 - 09:04)

Bonjour,

Il ne me semble pas voir de problème...

Par contre ton margin-bottom est à 0, ne serait-ce pas le problème ?

C'est un souci uniquement sur IE6 ou sur n'importe quel navigateur ?
s'il ne s'agit que du comportement IE6, alors essaie d'ajouter un "padding-bottom:1px" sur le div précédent de ton <p>.
Si cela corrige ton problème de marges, j'essaierai de trouver un article à ce sujet, mais je ne suis absolument pas certain qu'il en existe... (Les articles sur les fusions de marge n'en font pas référence.)
Modifié par Nigel (09 Jul 2009 - 08:26)

Salut,

Ton clear rétablit le flux pour cet élément, mais le margin-top se base sur le bas de l'élément frère précédent. Or tes éléments précédents sont en float, donc hors flux, alors le margin-top de ton <p> se base sur le bas des premiers éléments précédents dans le flux.

Suis-je clair ?

Solution : Englober tes deux flottants d'un troisième div auquel tu crées un nouveau contexte de formatage block en lui assignant un overflow:auto ou hidden par exemple.

bonjour désolé pour le retard, merci pour vos réponse, je pense que Agylus a vue juste.
j'ai englobé les flottant dans une div avec un overflow:auto et sa marche.
merci a tout les 3 ++

Mais vérifie quand même pour IE6...

@Nigel : Pourquoi ça ne fonctionnerait pas pour IE6 ?

Soit dit en passant, le margin-top fonctionnait déjà sur IE6 sans ça, étant donné qu'un bug fait que les éléments flottants sont considérés par leur parent sans avoir besoin de créer un nouveau contexte de formatage block.

Je ne sais pas ce que Maca a choisi comme solution, mais dans le cas où la marge est appliquée aux éléments (non floatés) d'un conteneur flotté et non au conteneur lui-même, celle-ci se voit annulée dans certains cas.

Comme nous n'avons pas vue sur l'intégralité du code HTML / CSS de Maca, je conseille quand même de vérifier sous IE6.

Bien sur, si elle suit à la lettre ton conseil, il ne devrait y avoir aucun souci.

@Nigel
salut sous IE6 grosse pagaille rien marche
vraiment je commence à moins aimer microsoft, et après sa il nous sorte un moteur Bing et pensen qu'ont va s'en servir avec tout ce qu'ils nous font galèré



et la solution choisie as été de placer
le meilleur prix guide achat video et les 2 photos de dessous dans une div

ensuite le paragraphe suivant je lui ai appliqué un margin-top et sa marche (sous firefox)
sous IE6 je le cherche encore mon paragraphe il s'en envolé, que faire?

avez vous un bon article traitant des bug courant de IE6 et 7 ?

merci
Modifié par maca (09 Jul 2009 - 22:50)