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%;}