Estrutura CSS

Eu comecei a fazer um site com um layout simples, mas como sou iniciante em CSS não consegui fazer o layout tomar forma normalmente. Então eu fiz uma gambiarra e deu certo, mas não funciona no IE6.

Eu fiz esse pequeno modelo no PhotoShop pra vocês entenderem:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img202.imageshack.us/img202/5545/modelob.png&key=5a488296664758a19ea38b65dbf7ca8afaac1b7b8f166fa46b99751c20d946e8" alt="modelob.png" />

URL: http://img202.imageshack.us/img202/5545/modelob.png

HTML:

<div id="corpo_todo">

 <div id="best_game"></div>

 <div id="anuncios"></div>

 <div id="rank"></div>

</div>

CSS:

#azul {
	margin:0 auto;
	width:870px;
	height:830px;
	border:1px #F00 solid;
	margin-top:25px;
	border-radius:7px;
	background-color:#FFF;
}

#amarelo {
	width:300px;
	height:320px;
	margin-top:20px;
	margin-left:20px;
	border:1px #F00 solid;
	border-radius:7px;
	float:left;
	display:inline-table;
}

#roxo {
	width:250px;
	height:450px;
	margin-top:360px;
	margin-left:20px;
	border:1px #F00 solid;
	border-radius:7px;
	position:absolute;
	float:left;
}

#verde {
	width:500px;
	height:800px;
	margin-top:20px;
	margin-left:20px;
	border:1px #F00 solid;
	border-radius:7px;
	float:left;
	display:inline-table;
}

O nome das divs no código CSS está de acordo com a cor do desenho.

Todas as 3 DIVs estão dentro da DIV azul. Em cima tem outras coisas, mas não fazem parte, é o menu e outras coisas.

Eu usei esse CSS e como vocês podem ver ta uma gambiarra só, mas funcionou.

Alguem pode me dizer como fazer para o código ficar limpo (como seria normalmente), e que possa pegar no IE6?