Ciao, ho la mia pagina:

codice:

<body>

<div id="container">

<div id="header"></div>


<div id="nav">

<div id="nav-middle">
[#RICERCA#]
[#CALENDARIO#]
[#ARTICOLI#]
[#SONDAGGI#]

[#FEED#]


</div>

</div>

<div id="content">
<div id="testo">

[#CONTENUTO#]

</div>
</div>

</div>


</body>
Con il relativo foglio di stile:

codice:
div#container{
margin:0 auto;
text-align: center;
width: 700px;
}

div#header{

margin-top: 0px ;
text-align: left;
width: 700px;
background:  url(img/head.gif);
height: 185px;
}

div#content{
float: left;
margin-top: 0px ;
text-align: left;
width: 495px;
background:  url(img/bg-left.gif) repeat-y;

}

div#nav{

float: right;
margin-top: 0px ;
text-align: left;
width: 205px;
background: url(img/bg-right.gif) repeat-y;

}
div#nav-middle{
float:right;
margin-top: 0px ;
margin-right: 0px ;
text-align: left;
width: 160px;
margin-left:10px;
}

div#testo{
float: left;
width: 430px;
margin-top: 0px ;
margin-left: 25px ;
text-align: justify;
padding: 10px;

}

div#testonav{
float: left;
padding: 5px;
width: 130px;
margin-top: 0px ;
text-align: left;
margin-left: 9px;
}
Il problema è che non capisco come mai ci sia un a capo tra le due colonne del layout utilizzando Internet Explorer, eppure penso di aver utilizzato correttamente float: left e float: right... usando Firefox questo problema non si presenta, tutto è allineato come dovrebbe essere.
Altra questione: i margini del testo nella colonna di sinistra sono diversi cambiando browser, in IE la distanza tra il testo e il bordo è come dovrebbe essere, mentre in firefox il testo è appiccicato. Come posso risolvere in modo che sia la stessa cosa per i due browser?

Ultima questione: come posso fare affinchè la colonna di destra (più corta) abbia la stessa lunghezza di quella di sinistra (più lunga)? Io non so a priori quanto questa sia lunga e quindi non posso impostarlo manualmente.

Per vedere online cosa succede, potete andare qui:

http://www.michelerua.it/dblog

Grazie