Disposição

ae galera das WS, estou com o seguinte problema, tenho um layout alinhado da seguinte forma:

Cabeçalho, 3 colunas, Rodapé. Segue abaixo o código das CSS que está disposto da seguinte forma no HTML:

<div id="geral">
	<div id="cabecalho">CABECALHO</div>
	<div id="meio"></div>
	<div id="esquerda"></div>
	<div id="direita"></div>
	<div id="rodape"></div>
</div>

#geral {
	width:900px;
	margin:0 auto;
	background-color: #808080;
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;

}
#cabecalho {
	background-color: #660099;
	height: 70px;
	clear:both;
}
#rodape {
	background-color: #333333;
	clear:both;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 20px;
	border: thin solid #595959;

}

#direita, #esquerda {

	width:175px;
	font:10px verdana;
	background-color: #808080;

}

#esquerda {float:left;} #direita {float:right;}

#meio {
	border:1px solid #CCCCCC;
	background-color: #000000;
	margin-top: 0;
	margin-right: 190px;
	margin-bottom: 0;
	margin-left: 190px;
	position:absolute;
	width: 520px;
}

Até ai tudo bem, ocorre que estou trabalhando com PHP e por motivos de sintaxe, a div id = "meio" tem que vir antes das "esquerda" e "direita", dessa forma que postei ai está funcionando soh que o corpo do site que está contido na div "meio" está passando por cima do rodapé.

Não manjo nada de CSS, então espero que consigam me ajudar pois dependo disso pra prosseguir com a programação.