Posizionamento di box

invisible93

Utente Attivo
12 Apr 2013
59
0
6
Firenze
ciao a tutti,
sto lavorando su un sito e ho grosso (almeno per me) problema:
Praticamente il sito è composto da alcuni box con posizione assoluta, però se ad esempio aumento o diminuisco lo zoom della pagina web, i box vanno per i fatti loro.
vi faccio un esempio:
HTML:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="box1">
</div>
<br>
<div id="box2">

</div>

</body>

il CSS è questo:
#box1 {
background: rgb(238, 238, 238);
width:800px;
padding: 10px;
-moz-box-shadow:5px 5px 2px 2px #333333;
-webkit-box-shadow:5px 5px 2px 2px #333333;
box-shadow:5px 5px 2px 2px #333333;
}



#box2 {
position:absolute;
left:50%;
background: rgb(100, 125, 238);
width:800px;
padding: 10px;
-moz-box-shadow:5px 5px 2px 2px #333333;
-webkit-box-shadow:5px 5px 2px 2px #333333;
box-shadow:5px 5px 2px 2px #333333;
}


Praticamente il secondo box rimane fisso e il primo si sposta seguendo lo zoom della pagina.
Se al box 2 elimino la position e il left, funziona come il primo e quindi va bene. però io ho la neccessita di lasciare il primo così com'è e il secondo di metterlo al centro.
Che attributi devo mettere al secondo box perchè possa "seguire" lo zoom della pagina?
ho provato con position:relative; e con position:static ; ma non vanno bene..
Help me!

Grazie in anticipo