il div centrale si sposta in basso su IE

bormiositi

il div centrale si sposta in basso su IE

ciao a tutti, ho un probema con un layout di un sito...

su firefox non o problemi ma, su IE, per alcune pagine del sito, il div centrale rimane nella posizione orizzontale corretta ma si sposta in verticale sotto il div laterale sinistro.

posto un po' di codice del css:

 
.twoColFixLtHdr #container { 
 width: 960px; 
 background-image:url(images/bg.gif);
 margin: 0 auto; 
 text-align: left; 
 padding: 0px 0px 0px 0px;
} 
 
.twoColFixLtHdr #header { 
position:relative;
top:0px;
margin:auto;
 } 
 
.twoColFixLtHdr #sidebar1 {
 float: left; 
 font-size: 12px;
 margin-bottom:20px;
 margin-top:20px;
 width: 85px; 
 height:250px;
 padding: 10px 0px 10px 105px;
 border-right: 1px solid #990000;
}
 
.twoColFixLtHdr #mainContent { 
 margin: 0 99px 0 200px; 
 padding: 20px 20px 0px 10px; 
 }

questo è l'ordine dei div sulle pagine:


<div id="container">
    <div id="header">...</div>
    <div id="sidebar1">...</div>
    <div id="mainContent">...</div>
 </div>

karedas

Ciao Bormiositi

Bisogna vedere i contenuti delle due colonne.
Conta comunque di seguire sempre questa regola:

** Margin** e **padding **sono dimensioni che vanno ad aggiungersi alla larghezza ed altezza totale degli elementi , soprattutto per IE.

Cosa vuol dire?

Che se hai un div di 200px e gli dai:

margin:0 20px 0 20px;
padding:0 10px 0 15px;

Il totale di tale div sarà:
** 200 + (20*2) + 10+15 = 265px.**

Se il loro contenitore , in questo caso Container, ha una dimensione totale inferiore alla somma della larghezza di tutti i div, allora i contenuti interni andranno a distribuirsi un pò come vogliono (e dove il float gli dice di dirigersi) nel tentativo di trovare posto.

Ho fatto una specie di favola di cappuccetto ma spero di essere stato esplicativo