Layout a 2 colonne errato in IE

[Artisan]

Salve a tutti.

ho un problema con un layout a 2 colonne che viene visualizzato erroneamente in IE...ma non capisco dove sia il problema...

Questo è il codice css...

#container 
	{
		display:block;
		background-color:#FFFFFF;
		margin:0 10% 0 10%;
		border-left:3px solid #7D7D7D;
		border-right:3px solid #7D7D7D;
	}

#header 
	{
		display:block;
		position:relative;
		width:100%;
		height:100px;
	}

#col_sx
	{
		display:block;
		position:relative;
		background-color:#0099FF;
		width:20%;
		height:400px;
		float:left;
	}
#page
	{
		display:block;
		position:relative;
		background-color:#006633;
		margin-left:20%;
		height:400px;
	}
#footer
	{
		display:block;
		position:relative;
		background-color:#996600;
		height:100px;
		clear:both;
	}

e questa è la pagina incriminata...

Potete darci un'occhiata?
Il problema sta nel div dei contenuti che con explorer si vede troppo margine sulla sinistra...
Sapete dirmi il perchè?
Grazie

[Mich_]

Secondo me devi eliminare il margin-left al #page e sostituirlo con
float:left;
(ho scritto giusto: left)

Inoltre io toglierei tutti i position: non servono e possono creare confusione (possono venir interpretati dai browser in modo diverso)

[Artisan]

Allora...
ho provato a mettere un float-left al posto del margin-left al div #page e ho cambiato la larghezza del div col_sx in 160px.
Questo è il codice css:

#container 
	{
		display:block;
		background-color:#FFFFFF;
		margin:0 10% 0 10%;
		border-left:3px solid #A3A3A3;
		border-right:3px solid #A3A3A3;
	}

#header 
	{
		display:block;
		width:100%;
		height:100px;
	}

#col_sx
	{
		display:block;
		background-color:#0099FF;
		margin:0;
		padding:0;
		width:160px;
		height:400px;
		float:left;
	}
#page
	{
		display:block;
		background-color:#006633;
		float:left;
		padding:0;
		border:0;
		height:auto;
	}
#footer
	{
		display:block;
		background-color:#996600;
		height:100px;
		clear:both;
	}
	
.prova
	{
		display:block;
		width:47%;
		height:auto;
		background-color:#00FF33;
		float:left;
		margin:2px;
		padding:5px;
	}

e questo è il risultato...
Con Firefox i div .prova non si affiancano all'interno del div Page e il div page si sposta sotto al div Col_sx...
Con IE si affiancano ma il div #page esce fuori dal container...

Se invece metto un "margin-left:160px;" al posto del float:left ottengo questo
Sembra corretto ma il div #page non si ingrandisce in base a quello che ha dentro..infatto nn si vede lo sfondo e con IE ,se rimpicciolisco la finestra, mi escono fuori dal container i div .prova

Come posso risolvere?

[Artisan]

Ho risolto un problema..
Allora , adesso il layout è corretto e il codice che ho usato è questo:

#container 
	{
		display:block;
		background-color:#FFFFFF;
		margin:0 10% 0 10%;
		border-left:3px solid #A3A3A3;
		border-right:3px solid #A3A3A3;
	}

#header 
	{
		display:block;
		width:100%;
		height:100px;
	}

#colsx
	{
		display:block;
		position:relative;
		background-color:#0099FF;
		margin:0;
		padding:0;
		width:160px;
		height:400px;
		float:left;
	}
#page
	{
		display:block;
		position:relative;
		background-color:#006633;
		margin-left:160px;
		padding:0;
		border:0;
		height:auto;
	}
#footer
	{
		display:block;
		background-color:#996600;
		height:100px;
		clear:both;
	}

.prova
	{
		width:40%;
		height:auto;
		background-color:#999900;
		margin-bottom:10px;
		padding:5px;
	}

e questo è il risultato

Il problema adesso è che se all'interno del div #page inserisco dei blocchi .prova con un float- left il div #page sparisce..e ottengo questo

Come faccio ad allineare all'inerno del div #page i contenuti?

[Mich_]

Non riesco a seguire quanto dici.

Non mi pare che il <div id="page"> sparisca, ma e` riempito dai vari <div class="prova">. Prova a metterci un colore di sfondo (diverso dagli altri), e forse lo vedi sui bordi, ma non ne sono sicuro, dato che i .prova non hanno margin.
Lo vedi se ci metti un bordo sottile (ma occhio che i bordi possono far sballare il layout in alcune condizioni).

PS. Nel tuo layout mi pare manchi la larghezza del container (in px, em oppure %); in alternativa manca la larghezza del body e html (meglio sempre metterla, altrimenti la % dei margini del container non si sa a cosa riferirla).