Salve a tutti,
sto cercando di capire come "bloccare" 3 div (contenuti in un altro div) nella loro posizione; ovvero:

<div class="header">
<div class="logo">
</div>
<div class="name">
<h1>Nome Cognome</h1>
</div>
<div class="contacts">
<p> Nome Cognome<br>Cell:1234567891<br>email:email@hotmail. it</p>
</div>
</div>


.header{width:100%;
height:150px;
position:relative;
top:0;
left:0;
background-color:black;
color:white;
}
.logo{background-color:red;
height:120px;
width:120px;
top:20px;
left:20px;
position:absolute;
}
.name{background-color:blue;
position:absolute;
height:120px;
width:500px;
left:160px;
top:20px;
}
.contacts{background-color:green;
position:absolute;
right:20px;
height:120px;
width:200px;
top:20px;
}



Col codice che ho scritto i tre blocchi si dispongono dove voglio, ma se ridimensiono la finestra il div contacts si sovrappone al div name, come posso fare per evitare ciò?
Io vorrei che, al ridimensionamento della pagina, si vedesse solo una certa porzione di "div".

Spero di essermi spiegato bene, sono alle prime armi con questi linguaggi ma anche con questo forum