Vorrei fare una pagina con i css in questo modo

intestazione
colonna sinistra | colonna destra ----> centro
1 colonna | 2 colonna | 3 colonna ----> corpo
pie di pagina

ma il centro ed il corpo si sovrappongono
dovè l'errore ?

grazie

paolo



codice:
<html>
<head>
<style type="text/css"> 
body { margin:0; padding:0 } 
hr { display:none } 
body { text-align:center }  
#testa { width:760px; margin:1em auto; text-align:left; border: 1px solid; }  
#centro { position:relative; width:760px; margin:1em auto; text-align: left; }  
#centro-sinistra { position:absolute; top:0; left:0; width:300px; border: 1px solid; background-color: yellow; padding: 5px; }  
#centro-destra { position:absolute; top:0; right:0; width: 300px; border: 1px solid; background-color: orange; padding: 5px; }  
#corpo { position:relative; width:760px; margin:1em auto; text-align: left; }  
#corpo-colonna1 { position:absolute; top:0; left:0; width:140px; border: 1px solid; background-color: red; padding: 5px; }  
#corpo-colonna2 { margin:0px 160px 0px 160px; border: 1px solid; background-color: blue; padding: 5px;  } 
#corpo-colonna3 { position:absolute; top:0; right:0; width: 140px; border: 1px solid; background-color: green; padding: 5px; }  
#piedipagina { width:760px; margin:1em auto; text-align:left; border: 1px solid; }  
</style> 
</head> 
<body> 
 
<div id="testa"><h1>NomeSito </h1></div>  <hr /> 
 
<div id="centro"> 
<div id="centro-sinistra">centro-sinistra</div> <hr /> 
<div id="centro-destra">centro-destra</div>  
</div>
 
 
<div id="corpo">
<div id="corpo-colonna1">corpo-colonna1</div> <hr /> 
<div id="corpo-colonna2">corpo-colonna2</div> <hr /> 
<div id="corpo-colonna3">corpo-colonna3</div>  
</div> 
 <hr /> 
 
<div id="piedipagina">

pié di pagina</p></div> 
 
</body> 
</html>
intestazione colonna sinistra | colonna destra ----> centro 1 colonna | 2 colonna | 3 colonna ----> corpo pie di pagina
intestazione colonna sinistra | colonna destra ----> centro 1 colonna | 2 colonna | 3 colonna ----> corpo pie di pagina
[QUOTE][CODE]