[Résolut] Hauteur div qui ne s'adapte pas au contenu sous ie7

Voici mon problème :
J'ai une div conteneur dont la taille ne correspond pas au contenu, c'est à dire que le contenu sort et chevauche les div positionnées en dessous... Mais seulement sous ie7.

Le problème se situe au niveau des concaténations de div que j'ai fait pour les ombres et les coins.

Exemple :
(cadre bleu : div conteneur, cadre rouge : contenu)

sous FF - ça marche


sous ie6 - ça marche aussi


sous ie7 - ça marche plus

Le copyright est chevauché...

Voici mon html simplifié :

<div id="conteneur">

<div class="encart">
   <div class="haut">
      <div class="haut_gauche"></div>
      <div class="gauche">

    	<div class="haut_droit"></div>
        <br class="nettoyeur" />

        <div class="centre">
          
         <!-- CONTENU -->

        </div>

        <div class="bas">
        	<div class="bas_gauche"></div>
            <div class="bas_droit"></div>
            <br class="nettoyeur" />
        </div>

      </div>
    </div>
</div>

</div>

Et mon css :

#conteneur {
	border:1px solid #0000FF;
}

.encart {
	position: relative;
	border:1px solid #FF0000;
	margin:auto;
	width:800px;
	padding:0px;
	background-color:#EEE;
}

/* Ombres */ 
.gauche {
	background:url(_img/ombre_g.jpg) repeat-y 0px -6px;
}
.centre {
	padding-left:4px;
	padding-right:4px;
	background:url(_img/ombre_d.jpg) repeat-y right;
}
.haut {
	height:6px;
	background:url(_img/ombre_h.jpg) repeat-x;
}
.bas {
	height:5px;
	background:url(_img/ombre_b.jpg) repeat-x;
}
.bas_gauche {
	font-size:1px;
	width:4px; height:5px;
	float:left;
	background:url(_img/ombre_bg.jpg);
}
.bas_droit {
	font-size:1px;
	width:4px; height:5px;
	float:right;
	background:url(_img/ombre_bd.jpg);
}
.haut_gauche {
	font-size:1px;
	width:9px; height:6px;
	float:left;
	background:url(_img/ombre_hg.jpg);
}
.haut_droit {
	font-size:1px;
	width:9px; height:6px;
	float:right;
	background:url(_img/ombre_hd.jpg);
}

.nettoyeur { 
	clear:both; 
	margin:0; padding:0; 
	border:none; 
	height:0; line-height:1px; 
	font-size:1px; 
}

Modifié par bilibu (12 Nov 2007 - 09:37)

Bonjour,
le code que tu as fourni ne correspond pas aux images que tu montres.
Donner la totalité du code XHTML et CSS ou mieux une page en ligne

Exact... je voulais juste le simplifier.

J'ai résolut, cependant le problème : les div n'étaient pas bien concaténées :

<div class="encart">

<div class="haut">
	<div class="haut_gauche"></div>
    <div class="gauche">
    	<div class="haut_droit"></div>
        <br class="nettoyeur" />
        <div class="centre">

        <!-- CONTENU -->

        </div>
        <div class="bas">
        	<div class="bas_gauche"></div>
            <div class="bas_droit"></div>
            <br class="nettoyeur" />
        </div>
    </div>
<!-- Fin Haut -->
</div>
<!-- Fin encart -->
</div>