Problema posizionamento layout liquido

[8andreaghiacci3]

Ciao sto cercando di realizzare, un layout liquido solo con css e xhtml, quello che vorrei realizzare è questo

#testata
#corpo {composto da: menu orizzontale - barra sinistra contenuti e barradestra}
#footer

Questo è il codice css:

#testata{
width: 90%;
height: 25%;
background: url(Img/SfondoTestata.jpg);
border: 1px dotted #CCCCCC;
position: relative;
min-height: 106px;
margin: auto;
}

#menu{
width: 90%;
top: 0px;
padding: 0;
margin: 0;
}

#corpo{
color: black;
width: 90%;
border: 1px dotted #FF0000;
position: relative;
margin-top: 5px;
margin: auto;
}

#footer{
width: 90%;
font-size: 90%;
background-color: #CCCCCC;
border: 1px dotted #FF0000;
margin: auto;
}

Ecco il codice xhtml

<div id="testata">
<div id="corpo">
<div id="menu">
<div id="contenuti">
<div id="navigazione">
<div id="footer">

Ovviamente i div vengono chiusi ogni volta.. La cosa che non riesco a fare è che vorrei mettere il menu tra la testata ed il corpo creando un box a parte però non riesco a fare il settaggio giusto dato che se metto l'id #menu tra #testata e #corpo mi si sballa tutto... So che sbaglio qualcosa ma non capisco cosa...
Grazie per l'aiuto

[alde90]

bè, penso che sia difficile fare quello che dici, usando il tuo codice html. Se vuoi mettere il menu tra testata e corpo con un metodo "pulito", devi mettere anche il tag div di id menu tra testata e corpo. Oppure, ricorrere al posizionamento assoluto (soluzione leggermente più "sporca", ma si può fare)