18041 sujets

Questions générales et questions de débutants

[résolu] Affichage d'une bordure contenant des flottants avec firefox

Bonjour à tous ! je poste ici mon premier message

j'utilise le code suivant :
<body>
<div id="contenu" style="text-align:left; width:950px; margin:0 auto; border-left:10px solid red;">
  <div style="float:right; width:220px; height:700px;">
    <h1 style="color:#F00; font-size:1.6em; margin:85px 0px 10px 0px;">R&eacute;habilitations d'un &icirc;lot urbain</h1>
    <p style="margin:20px 0px 25px 0px;">TEXTE</p>
    <img src="rehabilitation-quartier/garage.jpg" width="220" height="142">
    </div>
  <img src="rehabilitation-quartier/facade.jpg" width="680" height="131" style="padding:20px 0px; ">
  </div>
</body>


mon problème est l'affichage de la bordure rouge à gauche sur le div "contenu", IE7 arrive à calculer la hauteur de l'élément flottant et affiche la bordure, alors que firefox n'affiche la bordure que pour la hauteur qu'il connait, soit celle de l'image (131px) ...???

dois-je à chaque fois spécifier une hauteur au div-contenu et la ça fonctionne !

merci de vos réponse
cordialement
Denis upload/22153-ecran.jpg http://www.architectureetbois.com/equipement_bois/simple_body.html
Modifié par denis2web (09 Jun 2009 - 19:32)
Modérateur
Bonjour Denis2Web,

Après l'élément flottant, tu dois faire un clear pour rétablir le flux de la page. Exemple :

<div>
   <div style="float:left;">
   Contenu
   </div>

   <div style="clear:both">&nbsp;</div>
</div>


Personnellement, j'utilise un <div class="clear">&nbsp;</div> avec une déclaration CSS qui va bien. Lire l'article : Initiation au positionnement CSS : 2.position float
Modifié par Tony Monast (09 Jun 2009 - 19:12)
Sujet clos
Aller à