Salve a tutti. Ho un problema per quanto riguarda un div con un width a 100%, ossia lungo tutta la pagina visualizzabile.
Prima di tutto specifico che questo div non'è l'unico ad avere un width 100% ma ce ne sono altri 4, e seconda cosa al centro della pagina deve essere presente un div dalla larghezza fissa (diciamo 950px) ma l'altezza si adatta automaticamente al contenuto. Tale div deve rimanere al centro esatto della pagina.

Il problema sta nel fatto che, avendo una risoluzione da 1920*1080, la resa grafica è perfetta, i 4 div sono lunghi quanto tutta la pagina e al centro c'è l'altro div dalla larghezza fissa, ma quando vado a ridimensionare la pagina, appena il browser diventa più stretto della larghezza del div centrale (quindi meno di 950 px) i 4 div da width 100% si spostano verso sinistra, e quindi perdendo l'efficacia del width 100%.

Vi faccio vedere cosa accade:
Questo è ciò che vedo al massimo della risoluzione


Questo è ciò che accade quando il browser è più piccolo di 950px


Il div bianco stà perfettamente al centro e non viene nascosto, invece i div verdi si spostano verso sinistra.
Qual'è il problema?

Vi posto il codice di un div da width 100% (gli altri hanno il codice uguale)

codice:
#div {
height: 20px;
width:100%;
background:url(../img/*****), repeat;  
}
Questo è il body

codice:
*{	
	vertical-align:baseline;
	border:0;
	outline:0;
	margin:0 auto;
	padding:0;
	height:100%;
	width:100%
}


html, body {	
	background:#999;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:12px;
	color:#FFF;
}