Salve a tutti.
Da un po' di giorni ho iniziato a studiarmi i manuali sui CSS presenti su HTML.it, in particolare quello sul layout. Ho quindi iniziato a ricostruire da capo il mio intero sito, testandolo su Mozilla Firefox e Internet Explorer.
Mentre sul primo non vi sono problemi, nel secondo l'intero blocco centrale contenente i testi viene spostato sotto a quello laterale di navigazione.

La composizione della pagina è la seguente:
HEADER: occupa tutta la parte superiore
COLONNA SINISTRA DI NAVIGAZIONE: float sinistro, larga 150px
COLONNA DESTRA PRINCIPALE: float contiene il testo*
FOOTER: occupa tutta la parte inferiore.

*In questa colonna inoltre erano presenti alcune tabelle, che ho pensato a loro volta di realizzare con i CSS. Le tabelle sono ora costituite da:
LEFT: parte alta sinistra (con immagine di background)
MIDDLE: parte alta centrale (con immg. di background)
RIGHT: parte alta destra (con immg. di background)
TEXT: parte centrale in cui è presente il testo
FOOTER_TABLE: parte finale (con immg. di background)

Il CSS che utilizzo è questo, realizzato prendendo spunto da quello presente nella guida su Layout:

codice:
div#container{                   /* blocco che contiene tutta la pagina */
	position:relative;
    width: 980px;
    margin: 0px auto;   /* centra negli altri browsers */
    text-align: left;   /* ripristina l'allineamento */
}

div#header{                      /* header pagina */
	height: 101px;
    background: url(images/Top.png);	
}

div#navigation{ 		/*Posizione menu e larghezza */
    clear: left;
    float: left;
    width: 150px;
    background: url(images/Base.png);	
    text-align: center;	
}

div#content{    		 /* I contenuti saranno spostati di 155 pixel da sinistra */
    clear:right;
    margin-left: 155px;
}	

#left{				/* Parte sinistra tabelle dei contenuti */
	float: left;
	height:100%;
	width: 6px;
	\width:7px;
	w\idth:6px;
	height:27px;
	padding: 0em 0 0 0px;
	background-image: url(images/TitleBorderSx.png); 
}

#right{				/* Parte destra tabelle dei contenuti */
	float: right; 
	width: 6px;
	\width:7px;
	w\idth:6px;
	height:27px;
	padding: 0em 0 0 0px;
	background-image: url(images/TitleBorderDx.png); 
}

#middle{  			/* Parte centrale tabelle dei contenuti */
	margin: 0 0px;
	padding: 0em 10px;
	height:27px;
	line-height: 27px; 
	vertical-align:middle;
	text-align: left;
	color: #FFFFFF;
	font-weight: bold;
	background-image: url(images/TitleBorderCentral.gif); 
}

#text{				/* Testo tabelle dei contenuti */
	/*clear: both;*/
	margin: 0 0px;
	padding: 1em 10px;
	color: #FFFFFF;
	background-color:#333333;	
}

#foot_table{			/* Parte finale tabelle dei contenuti */
	/*clear:both;*/
	height:2px;
	background-image: url(images/FinalBorderCentral.gif); 	
}

div#footer{ 
	clear: both; 
	height: 23px;	
	font-weight: bold;	
             text-align: right;	
	line-height: 23px;	
             vertical-align: middle;	
             background: url(images/Credits.png);	
}

Le mie domande sono:
1. E' possibile modificando il codice fare in modo che anche in IE venga visualizzata bene la pagina? Se si, cosa c'è di sbagliato?
2. E' giusto realizzare le tabelle per la parte del testo come ho fatto oppure ci sono metodi migliori?

Nel caso servisse, posso lasciare anche il link alla pagina su cui sto lavorando: http://www.masterofquest.altervista.org/NEWHome2.php