Ho il seguente codice con relativi CSS:

codice:
<html>
   
<head>
<style>
html, body              {
                          margin: 0px;
			  padding: 0px;
                          width: 100%;
                        } 
                          
#testa                  { 
                          background-color: #f00;
                          width: 100%;
                          height: 116px;
                        } 
#menu                   { float: left;
                          background-color: #0f0;
                          width: 164px;
                          height: 400px;
                        } 
#content                { clear: right;
                          background-color: #00f;
                          width: 820px;
                          height: 400px;

                        }
</style>
</head>

<body>

<div id="testa">
	TESTATA
</div>

<div id="menu" >
	MENU
</div>

<div id="content">
	CONTENUTO
</div>

</body>

</html>
Per me è importante che la testata occupi comunque tutta la larghezza della pagina, anche se il contenuto è limitato in larghezza.

Il problema nasce nel momento in cui ridimensiono la finestra del browser ad una larghezza inferiore a quella della sezione menu+contenuto. In questa situazione compare la barra di scorrimento orizzontale. Se scorro la barra orizzontale per visualizzare la parte più a destra lo sfondo del menu non copre tale parte. C'è soluzione?

Forse qualche immagine vale più di mille parole...