ho un problema di visualizzazione con internet explorer

la pagina ha questa struttura

codice:
<body>
	<div id="main">
			    
              <div id="contenuto"> 
                      <div id="colonna_sx"></div>
                      
                       

Qua ci va il contenuto testuale della pagina</p>

                      <div id="colonna_dx"></div>
	      </div>
	  
	      <div id="footer"></div>
       </div>
</body>
questo è il css associato

codice:
html,body
{
	margin:0;
	padding:0;
	
	font-family:verdana,arial,sans-sarif;
	font-size:10px;
	text-align:center;
	color:#666666;
	
	height:100%; 
	
	
}

div#main
{
	width:760px;
	margin: 0 auto;
	text-align:center;
	
	
}



div#colonna_sx
{
	position:absolute;
	left:0;
	top:0;
	
	width:37px;
	height:100%;
	
	float:left;
	
	margin:0;
	border-right:1px solid #fff;
	
	background:  url("sfondo_colonna_sx.jpg");
}

div#contenuto
{
	position:relative;

	width:505px;
	height:auto;
	
		
	padding: 10px   208px 5px 47px;
	
	background-color:#fff;
	
	text-align:justify;
	line-height:1.5em;
	font-size:14px;
	color:#666666;
}



div#colonna_dx
{
	position:absolute;
	right:0;
	top:0;
	
	width:198px;
	height:100%;
	
	float:right;
	
	
	background:  url("sfondo_colonna_dx.jpg"); 
	
}


div#footer
{
	width:760px;
	height:40px;
	
	margin:15px auto;
	text-align:center;
	
	border-top:1px solid #ccc;
}

Il problema è nelle colonne destra e sinistra.

Mentre con firefox l'altezza delle due colonne è esattamente pari a quella del contenuto testuale, il che è esattamente l'effetto che volevo realizzare, con internet explorer invece le due colonne laterali sono alte quanto il loro contenuto e sembrano 'mutilate' rispetto al resto della pagina

Ho smanettato un po e letto qualche articolo ma non ne sono venuto a capo..come posso risolvere?