vorrei fare una pagine con i css ma non ci riesco
vorrei una pagine così
intestazione
colonna sinistra | colonna destra ----> centro
1 colonna | 2 colonna | 3 colonna ----> corpo
pie di pagina
ma il centro ed il corpo si sovrappongono
dove sbaglio
grazie
paolo
<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 { /*sinistra*/
position:absolute;
top:0; left:0;
width:300px;
border: 1px solid;
background-color: yellow;
padding: 5px;
}
#centro-destra { /*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 { /*sinistra*/
position:absolute;
top:0; left:0;
width:140px;
border: 1px solid;
background-color: red;
padding: 5px;
}
#corpo-colonna2 { /*centrale*/
margin:0px 160px 0px 160px;
border: 1px solid;
background-color: blue;
padding: 5px;
}
#corpo-colonna3 { /*destra*/
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>
