Problema con il posizionamento dei div

Buonasera, sto realizzando un sito e ho un problema nel posizionare dei div.
Ho un div centrale con all'interno altri div. Un div ha come background un'immagine ma quando riduco anche di poco la finestra l'immagine rimane della stessa dimensione ma il suo contenitore, e anche gli altri, si riducono drasticamente e si allungano. Un'altro div posto al di sotto e contenente un testo si deforma allungandosi. Di seguito il codice:

Codice HTML:

<div id="contenitore"> <div id="img"></div> <div id="descrizione"> <p>Testo </p> </div> <div id="inserti"> <div id="primo"></div> <div id="secondo"></div> <div id="terzo"></div> </div>

CSS:

Codice:

/* contenitore centrale */ #contenitore{width:40%;border:2px solid black;height:1200px;margin:0 auto; box-shadow: 0 0 25px #000;-moz-box-shadow:0 0 25px #000;webkit-box-shadow:0 0 25px #000; filter:progid:DXImageTransform.Microsoft.Shadow(color='#000',Direction135, Strength=10);} /* immagine principale */ #img {background-image:url(images/foto_home.png);background-repeat:no-repeat;background-position:center; height:300px;width:700px;margin: 0 auto;margin-top:30px;} #descrizione {margin: 0 auto;margin-top:30px;height:300px;width:75%;} p {text-align:center;font-size:20px;box-shadow: 0 0 25px #969696;padding:7px; -moz-box-shadow:0 0 25px #969696;webkit-box-shadow:0 0 25px #969696; filter:progid:DXImageTransform.Microsoft.Shadow(color='#969696',Direction135, Strength=10);} #inserti {margin: 0 auto;margin-top:30px;height:350px;width:75%;border: 1px solid black;} #primo {float:left;border: 1px solid black;height:340px;width:35%;} #secondo{float:left;border: 1px solid black;height:340px;width:35%;} #terzo {float:left;border: 1px solid black;height:340px;width:35%;}

prima di tutto usa i tag per includere il codice nel post ..

nel codice HTML manca una chiusura di un DIV (forse solo un errore di trascrizione qui..)

tutti i DIV hanno una larghezza in percentuale ad eccezione di quello che contiene l'immagine in background
questa e' la ragione per cui al dimensionarsi della finestra il DIV #IMG rimane di dimensioni fisse mentre gli altri modificano le loro dimensioni in percentuale.

il P che contiene il testo e' subordinato al DIV #descrizione , quindi si "adatta" alla percentuale.

cio' che non si deducie dal tuo post , e' la domanda !?
come vorresti i tuoi elementi ?

... e' normale che degli elementi che hanno una impostazione di dimensione in percentuale variano in base al variare della finestra;
quindi si contraggono o si allargano...

vorrei che gli altri div si comportassero come quello che contiene l'immagine

visto che quello che contiene l'immagine ha una dimensione fissa e non in percentuale
devi impostare anche gli altri DIV con dimensioni fisse!

o .. se necessiti di avere tutto in percentuale , devi modificare il div immagine da dimensioni fisse a percentuali

certo se hai un mix (percentuale / fisso) alcuni elementi modificheranno la loro proporzione ed altri no , creando un disallineamento

grazie della dritta!

ho un'altro problema, a parte che non riesco a rispondere alla discussione normalmente e quindi devo usare la risposta rapida, vabbè.
Ho un div con un background, all'interno ho una lista orizzontale, so che per farla orizzontale bisogna usare il float:left, il problema è che la lista rimane tutta a sinistra, ho provato a spostarla mettendola dentro un altro in div, in modo che il div contenente la lista fosse centrato dentro il div superiore col background ma non riesco a centrarlo, ho usato martin: 0 auto, che per i contenitori sottostanti aveva funzionato ma con questo no. In pratica ora tutti gli altri div non si ridimensionano in maniera disuguale ma la lista sembra fissa. Non ho messo nessun posizionamento assoluto quindi non capisco perchè questo div non funzioni.

la lista ( quindi UL LI ) non devi usare float per averla orizzontale ti basta definire nel CSS

Codice:

li{ display:inline-block; }

ah ok grazie della dritta, è che su alcuni siti consigliavano di usare il float!Provo come dici tu!