Problème d'alignement de block sous IE[RESOLU]

bonjour à tous
Un problème que je rencontre sous IE, c'est fou je ne comprends pas pourquoi!
voilà mon code :

#conteneur {
width: 800px;
margin:0 auto;
padding: 0;
background-color:#CCCCFF;
}

#centre {
margin:0 170px 0 300px;
padding: 0;
background-color: #fff;

}

#gauche {
float:left;
width: 300px;
padding: 0;
}
#droite {
float:right;
width: 180px;
padding: 0;
}

<div id="conteneur">
<div id="gauche" style="border: 1px solid gray;"></div>
<div id="droite" style="border: 1px solid gray;"></div>
<div id="centre" style="border: 1px solid gray;"></div>
</div>

SAchant que dans mes block j'ai du contenu!
Comme on peut le voir ma largeur du block conteneur est de 800px!
Les dimensions de mes block contenus sont : 300px(#gauche), 180px(#droit), 320px (#centre)

#centre contient une image qui fait 320px de largeur
si on additionne le tout on tombe bien sur 800px:300+320+180 = 800px
Mais bizarement sous IE ses 3 block semblent faire + 800px de largeur et du coup mon block #centre descend en bas de page

EDIT: pour proposer un support à mon problème voyez la difference avec mozilla et IE http://imotep.freezee.org/test.html
Modifié par imotep (24 Jul 2005 - 21:12)

en fait je viens de faire quelques tests et sous cette forme ça marche bien sous les 2 navigateurs !

#conteneur {
width: 800px;
margin:0 auto;
padding: 0;
background-color:#CCCCFF;
}

#centre {
float:left;
padding: 0;
background-color: #fff;
width: 320px;
}

#gauche {
float: left;
width: 300px;
padding: 0;
}
#droite {
float:left;
width: 170px;
padding: 0;
}

<div id="conteneur">
      
      
	     
	  
	  <div id="gauche" style="border: 1px solid gray;">      
		  <br /><br />Toutes les dernieres techniques de mode en coiffure, les plus beau soins du corps, un nouveau centre d'amincissement, et les dernieres technique d'épilation définitive par lumiere pulsée ou éléctrique ...
        </p>
        <p><img src="image/facade1.jpg" alt="Façade du salon" style="margin-left: 75px;" /> </p>
		
      </div>
	  
<div id="centre" style="border: 1px solid gray;">
        <ul id="reactive">
<li><a id="menu1" title="Coiffure" accesskey="1" href="#"></a></li> 
<li><a id="menu2" title="Esth&eacute;tique" accesskey="2" href="#"></a></li> 
<li><a id="menu3" title="Bronzage" accesskey="3" href="#"></a></li> 
<li><a id="menu4" title="&eacute;pilation" accesskey="4" href="#"></a></li> 
<li><a id="menu5" title="Amincissement" accesskey="5" href="#"></a></li> 


</ul>
      </div>
	  <div id="droite" style="border: 1px solid gray;">
        <p id="sponsor">
         Salon agréé 
        </p>
        
        <ul id="menudroit">
          <li>
            <a href="#"><img src="image/orea.jpg" alt="logo l'oreal" /></a>
          </li>
          <li>

            <a href="#"><img src="image/carita.gif" alt="logo carita" /></a>
          </li>
          <li>
            <a href="#"><img src="image/matis.jpg" alt="logo matis" /></a>
          </li>
          <li>
            <a href="#"><img src="image/kerastase.gif" alt="logo kerastase" /></a>

          </li>
		  <li>
            <a href="#"><img src="image/starvac.gif" alt="logo starvac" /></a>

          </li>
		  <li>
            <a href="#"><img src="image/tancenter.gif" alt="logo kerastase" /></a>

          </li>
        </ul>
      </div>
      
      

en clair j'ai mis mes 3blocks en float:left;
au lieu de placer un float:left et un float: right; de mettre le #centre au milieu ....

Pourquoi cette derniere methode ne marche pas ????
Pourquoi suis je obligé de mettre 3float:left; alors que 2 suffisent ????

(petite remarque en passant, je passe furtivement, ton titre "incompréhensible" est lui même incompréhensible, tâche de trouver quelque chose de plus explicite par rapport à ton problème histoire qu'on sache de quoi ça parle.)

effectué !!!
pas d'idée

Lol !! toujours aussi peu informatif ton titre

Un truc du style "problème de dimension de bloc" aurait été plus approprié.

Pour ton problème, c'est à cause des bordures.
Regarde du côté du modèle de boite et de ses différences entre navigateurs.
Le mieux est de ne pas ajuster les tailles au pixel près et de se laisser quelque pixels de marges (ici 4 pixels : 2 fois 2px)
http://openweb.eu.org/articles/dimensions_boites_css/

oui je suis allé y faire un tour!
en effet le problème pourrait venir de là, mais c'est que je n'utilise pas de border, donc a priori il ne devrait pas avoir de problème du à celà ...

imotep a écrit :


<div id="conteneur">
<div id="gauche" style="border: 1px solid gray;"></div>
<div id="droite" style="border: 1px solid gray;"></div>
<div id="centre" style="border: 1px solid gray;"></div>
</div>

Euhhh c'est pas des bordures ça ??

Non, les bordures ne font qu'ajouter au fond du problème, qui semble relever du IE Three Pixel Text-Jog, dont un passage donne la clé AMHA:

a écrit :
So what happens is that the div does not display until it is below the vertical level of the float. There, the 3px does not get applied, and the now properly sized div fits just fine, especially with no float to sit next to the div.

Without knowledge of the 3px space, solving this misalignment can be nearly impossible.

<edit>avec les bordures, il manque 10px au conteneur, soit 4px de bordures + les 2 fois 3px du bug... Là où le bidule est vicieux, c'est que ce double espace de 3px entre le bloc en flux et les flottants intervient dans le calcul fait par IE et dans le positionnement, mais qu'il n'est plus visible lorsque le bloc vient se placer en dessous des flottants.
En revanche, ce qui m'étonne, c'est que dans FF et Opera, le bloc central recouvre en fait le bloc droit d'un petit quelque-chose...</>
Modifié par Laurent Denis (24 Jul 2005 - 20:48)

Olivier a écrit :


Euhhh c'est pas des bordures ça ??

Cet exemple était pour poser la question, mais j'avais attribué des bordures pour visualiser les dimensions des block, mais à l'origine, je ne les avais pas, et mon problème etait bien présent !

Parcontre le problème venait bien de quelques px de marge,que firefox lui compensait en prenant les px sur les autres bloc, par dessous ...
pas logique ...
Merci à tous les deux, en tout cas.