Ajustement auto dans la page

Bonjour,

Je suis actuellement sur un projet pour mon école d'informatique, je dois faire un site web e-commerce en HTML / CSS puis y implémenter du javascript et du PHP plus tard..

Pour le moment, j'ai fais la mise en page de mon index mais j'ai un problème :

Lorsque le navigateur est ouvert en plein écran, l'affichage de mes blocs et de mes textes sont nickels mais lorsque je réduis la taille du navigateur, le texte sort de mes blocs et tout devient super moche.

Sachant que dans mon fichier CSS j'ai fais apporté des modifications tels que :

.footer
{
width: 45%;
padding-bottom: 12px; /* pas touche */
padding-left: 0px;
padding-right: 0px;
padding-top: 10px;
margin-left: 27%; /* décalage gauche pas touche */
height: 30%;
margin-right: 75%;
margin-top: 1000px;
margin-bottom: 0px;
background-color: #333333;
}

.numero{color: #239bf3;font-size: 20px;}

.div1 a{color: white;}

.div2 a{color: white;}

.div1 p{font-size: 12px;text-align: left;}

.adresse p
{
font-size: 12px;
text-align: justify;
margin-top: 10px;
}

.div1
{
color: #808080;
left: 0px;
top: -10px;
padding: 10px;
margin-right: 410px;
margin-bottom: 5px;
position: relative;
height: 100%;
}

.adresse
{
color: #808080;
left: 34.4%;
top: -240px;
padding-left: 10px;
padding-top: -20px;
padding: 5px;
position: relative;
margin-right: 410px;
margin-bottom: 5px;
height: 104%;
position: relative;
}

.div2 h3
{
color: #239bf3;
text-align: left;
margin-top: 20px;
margin-bottom: 5%;
}

.div2
{
color: #808080;
position: relative;
left: 69%;
margin-right: 60%;
top: -470px;
height: 109%;
width: 180px;
}

.autre
{
padding-left: 5px;
margin-top: 0px;
padding-bottom: 5px;
margin-bottom: 5px;
}

.autre li
{
font-size: 12px;
padding-bottom: 15px;
text-align: left;
list-style-type: none;
}

Je donne précisément des valeurs pour décaler des parties et des blocs ( comme pour centrer un div par exemple), car je ne vois pas comment faire l'effet que je recherche sans.

Ce CSS corresponds au code HTML suivant :

<footer class="footer">
<div class="div1">
<a href="contact.html">Envie de nous contacter?</a>
<p>Conseil et commande au téléphone :<br />du lundi au vendredi de 9h à 20h, le samedi de 10h à 19h.</p>
<p>France métropolitaine<br /><strong class="numero">01 48 05 86 12</strong><br />Appel gratuit depuis un poste fixe.</p>
</div>
<div class="adresse">
<p>Ouvert du lundi au samedi de 9h à 21h non-stop.<br />1 Avenue Malanco<br />75001 Paris.</p>
<p>Station Malanco, métro ligne 12.</p>
</div>
<div class="div2">
<ul class="autre">
<h3>Informations utiles!</h3>
<li><a href="nouveaute.html" title="Nouveauté">Nouveauté</a></li>
<li><a href="nous.html" title="Qui sommes nous?">Qui sommes nous?</a></li>
<li><a href="condition.html" title="Conditions générales de vente">Conditions générales de vente</a></li>
</ul>
</div>
</footer>

En espérant que quelqu'un ou quelques personnes puissent m'aiguiller.

Cordialement.