Ciao Matteo!
Il tuo CSS è molto bello... ricco di commenti, ordinato... secondo me: hai un futuro come programmatore di CSS 8)
Anche le regole vanno benino! In gran parte, ora, credo che il tuo problema sia il float:left del #menu per cui, questo, non occupa più lo spazio che gli è assegnato ed il #contenuto collassa a sinistra... di conseguenza devi poi dare a #menu un margine negativo a sinistra, perchè #contenuto "gli si infila sotto" 8)
Giusto? Bah... spero di si... comunque, riparti da 0 con il tuo layout posizionando i div principali prima che abbiano "le cose dentro" in modo che tutto sia + semplice e chiaro.
Hai il div #contenitore e questa è una gran cosa, ma nel tuo codice, ora, non è sfruttato a dovere... prova a ripartire da qui:
codice:
<head>
<style type="text/css">
#contenitore {
width: 550px;
margin:0 auto;
}
/* testata */
#testata {
width: 100%;
background-color:#00FFFF;
}
/* menu a sinistra */
#menu {
width: 150px;
float:left;
background-color:#0000FF;
}
/* contenuto */
#contenuto {
width: 400px;
float:right;
background-color:#FFFF00;
}
/* footer */
#footer {
width: 100%;
clear:both;
background-color:#009933;
}
</style>
</head>
<body>
<div id="contenitore">
<div id="testata">testata</div>
<div id="menu">menu</div>
<div id="contenuto">contenuto
p</p>
p</p>
p</p></div>
<div id="footer">footer</div>
</div>
</body>
</html>
...dovresti risolvere 8)
o/ !