Problema menu largo quanto la pagina

[The_Valzo]

Il sito in questione è questo (tralasciate l'header che è orribile ora). Il problema è la barra rossa: infatti se provate a restringere la finestra del browser e ricaricare la pagina, e muovervi solo con le barre, potrete notare che la barra è stata creata solo dove la pagina era visibile al momento del caricamento. Il codice che la crea è questo:
HTML

<div id="menu-bar"> 
	<div id="menu"> 
		<ul>
 			[*]Home
 			[*]Eventi
 			[*]TV
 			[*]Curcuiti
 			[*]Musei
			[*]Contatti
 		[/list]
 	</div>
 </div>

CSS

#menu-bar {
 	height: 40px;
	width:100%;
 	margin-top:20px;
 	background-color:#CC3333;
 }

N.B: la barra viene creata allo stesso modo anche togliendo "width:100%".

[sgogghy]

Scusa ma a me la barra rossa sembra non abbia alcun problema.

[The_Valzo]

Non lo so, forse non mi sono spiegato bene.. dovrebbe essere lunga tutta la pagina, invece facendo come ho scritto (rimpicciolire la schermata del browser-> ricaricare la pagina->muoversi verso destra con la barra) o da cellulare (che fa visualizzare una porzione di pagina alla volta) la lunghezza è parziale.. voi che browser avete usato? Cmq lo so, l'header è pessimo anche per essere provvisorio XD

Occhio di usare la barra e non ingrandire la finestra tirando l'angolo!

[sgogghy]

Avevo capito male
Comunque il problema non è nella barra: mi spiego.

Alla barra hai dato una width di 100%, questo vuol dire che indipendentemente dalla dimensione dello screen, la barra prendere tutta la sua lunghezza.

Cosa che però non è stata fatta per il contenuto che viene sotto alla barra ovvero a id="#page".
Questo comporta che se ridimensioniamo la finestra, avendola più piccola di 1120 (valore di width di #page)otterremo uno scorrimento e otterremo che la width della barra rossa avrà un (ipotetico) valore di 900, mentre #page continuerà a essere 1120

Spero di essermi spiegato bene

[The_Valzo]

Wow Grazie, ha funzionato! Ci ho messo un po' ma dopo ho capito XD