Usare fogli di stile in base alla dimensione in px e` una cosa possibile (ci sono diverse discussioni sull'argomento in questo forum).
Pero` forse ti basta usare dimensioni in %. Ma questo lo devi decidere in base a cosa va inserito nei blocchi blu.
Faccio un'ipotesi:
codice:
HTML:
<body>
<div id="contenit">
<div id="Blocco1"> <p>Div 1</p></div>
<div id="Blocco2"> <p>Div 2</p></div>
<div id="Blocco3"> <p>Div 3</p></div>
<div id="Blocco4"> <p>Div 4</p></div>
</div>
</body>
CSS:
html, body {
height: 100%; /* queste due sono essenziali */
width: 100%;
overflow: hidden; /* o vedi tu che valore dare - conviene in questo caso definire l'overflow */
}
#contenit {
height: 100%; /* queste due sono essenziali */
width: 100%;
position: absolute; /* o anche relative */
overflow: hidden;
background: pink; /* questo e` per le prove */
}
#contenit div {
position: absolute;
width: 30%; /* supponendoli grandi uguali */
height: 30%;
background: blue;
}
#Blocco1 {
left: 13%; /* un terzo dello spazio libero dai blocchi */
top: 13%;
}
#Blocco2 {
left: 66%;
top: 13%;
}
#Blocco3 {
left: 13%;
top: 66%;
}
#Blocco4 {
left: 66%;
top: 66%;
}
Naturalmente ho messo le dimensioni e posizioni piu` o meno a caso, per cui vedi tu se la cosa puo` andare