Comment faire pour ajuster les dimensions de ma page web ?

Bonjour, j'ai réalisé un site web puis j'ai constaté que les positions de mes composants changent d'un écran à l'autre. Quand je zoom tout est foutu. Puis j'aimerais bien régler le problème de compatibilité avec les anciens navigateurs. Aidez moi s'il vous plait ! C'est un projet que je dois rendre au prof. Merci !
Voici le code CSS :

*
{
 margin:0px;
 padding:0px;
 list-style:none;
 text-decoration:none;
}

body
{
 height:1350px;
 /*background-image:url(".\\Photos\\grey.png");
 background-repeat:no-repeat;
 background-attachment:fixed;
 background-size:100% 2000px;*/
 background-color:#d9dcf4;
 position:relative;
 width:100%;
 
}
.wrapper
{
 width:100%;
 margin-left:auto;
 margin-right:auto;
}
.imgHeader img
{
 height:170px;
 width:100%;

}
.imgHeader
{
 width:100%;
}
.lng
{
 float:right;
 margin-top:5px;
 margin-right:10px;
}
.lng>img
{
 position:relative;
}

div.menu
{
 float: left;
 margin-right: 100px;
 width:200px;
 height:350px;
 margin-top:2%;
 clear:both;
}


div.menu ul li
{
 width:180px;
}
div.menu ul li a
{
 margin-top:15px;
 background-color:#09316e;
 width:180px;
 padding-top:10px;
 padding-bottom:10px;
 padding-left:20px;
 border-radius:0px 20px 20px 0px;
 box-shadow:5px 0px 10px #939393;
 display:block;
 font-family:tahoma;
 font-size:18pt;
 color:white;
}

div.menu ul li a:hover,div.menu ul li a.active
{
 padding-left:75px;
 box-shadow:5px 0px 10px #236B8E;
}

div.menu ul li a
{
 width:100%;
}
/*Menu transport*/
div.menu ul ul
{

 visibility:hidden;
 /*background-color:#09316e;*/
}

div.menu ul li ul li a:hover
{
 height:30px;
}
div.menu ul li ul li a
{
 margin-left:150px;
 margin-top:0px;
 border-radius:20px 20px 20px 20px;
}
div.menu ul li:hover ul
{
 visibility:visible;
}
/*Fin Menu Transport*/
.mainWlcm
{ 
 /*float: right;*/
 margin-top:10px;
 width:75%;
 max-width:900px;
 margin-left:350px;
}

.Bienvenudado
{
 margin:30px;
 padding:20px;
 height:550px;
 max-height:550px;
 position:relative;
 background-color:#f3f4fb;
 border:3px solid #4e79bb;
 border-radius:10px/10px;
 
}

.h1
{
 font-size:32pt;
 font-family:"Times New Roman";
 color:#09316e;
 margin-left:10px;
}
p
{
 font-family:Verdana;
 color:black;
 margin-left:70px;
}
p>a
{ 
 color:#09316e;
 padding:5px;
 border:2px solid #ccc;
 border-radius:15px/15px;
 font-family:"Verdana";
}
p>a:hover
{
 border:2px solid #fff;
 background-color:#fff;
}
.h1>img
{
 width:300px;
 max-width:300px;
 height:32px;
 max-height:32px;
}
strong
{
 color:#99CC32;
}

.slide
{
 position:absolute;
}

.slide > img:hover
{
 cursor:pointer;
}

.slide > img
{
 overflow:hidden;
 position: absolute;
 width:550px;
 height:332px;
 float:left;
 display:none;
 border-radius:15px/15px;
 margin-left:130px;
 margin-top:35px;
}

.right
{
 padding:5px 15px;
 background-color:#E6E8FA;
 text-decoration:none;
 color:#236B8E;
 margin-top:180px;
 margin-right:50px;
 border-radius:15px/15px;
 font-family:"Verdana";
 font-weight:bold;
 font-size:18pt;
}

.left
{
 padding:5px 15px;
 background-color:#E6E8FA;
 text-decoration:none;
 color:#236B8E;
 margin-top:180px;
 margin-left:30px;
 border-radius:15px/15px;
 font-family:"Verdana";
 font-weight:bold;
 font-size:18pt;
}

.right
{
 float:right;
 margin-right:-5px;
}

.left:hover,.right:hover
{
 font-size:20pt;
}

.left:active,.right:active
{
 font-size:15pt;
}

.left

{
 float:left;
 margin-left:2px;
}

.contactDiv
{
 margin-top:auto;
}
.contactImg
{
 width:70px;
 height:70px;
 float:right;
}
.contactImg>img
{
 width:60px;
 height:60px;
 margin-top:265px;
}
.contactImg>img:hover
{
 cursor:pointer;
}
#frm
{
 border:2px solid #000;
 width:220px;
 height:210px;
 padding:15px;
 position:relative;
 z-index:10;
 margin-top:91px;
 background-color:purple;
 /*margin-left:1095px;*/
 display:none;
 float:right;
 margin-top:78px;
 
}
input
{
 width:200px;
 height:28px;
 padding-left:5px;
}
textarea
{
 width:220px;
 height:65px;
 padding-left:5px;
 
}
.btn
{
 margin-left:10px;
}
.btn:hover
{
 cursor:pointer;
}
.bgfooter
{
 background-image:url("../Photos/Footer.jpg");
 background-repeat:no-repeat;
 background-position:center;
 background-size:100% 100%;
 width:100%;
    
 position:absolute;
 bottom:0; 
 left:0;
 clear:both;
}
.Plan
{
 padding:10px;
 margin-left:20px;
 float:left;
 text-align:center;
}
.Plan>h4
{
 color:white;
 padding-bottom:4px;
}
.Plan>ul li 
{
 list-style:circle;
 color:white;
 padding:3px;
}
.Plan>ul li a,.Plan>ul li:visited
{
 color:#AECFE9;
}
.Plan>ul li a:hover
{
 color:red;
}
.T
{
 margin-left:30px;
}
.tel
{
 margin:auto;
 margin-left:300px;
 padding:10px;
 margin-top:40px;
}
.tel>h4 strong
{
 color:#8082F2;
}
.tel>h4
{
 color:#ccc;
}
.adr
{
 float:right;
 margin-right:350px;
 margin-top:-140px;
}
.adr>p
{
 font-family:verdana;
 color:#8082F2;
}
.adr>p span
{
 color:white;
}

et voici le code HTML :

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Online Shipping</title>
<link rel="stylesheet" href="CSS/monStyle.css"/>
<script src="JS/jquery.js"></script>
<script src="JS/slider.js"></script>

</head>
<body>
<!--[if lt IE 7]>
<style type="text/css">
.mainWlcm {
width:expression(document.body.clientWidth >= 1000? "1000px": "auto" );
}
</style>
<![endif]-->


<div class="wrapper">
<div class="imgHeader">
 <img src="Photos/bg.jpg";/>
</div>
 <div class="menu">
  <ul>
   <li><a class="active" href="#">Acceuil</a></li>
   <li><a href="French-Fr/Apropos.html">A propos</a></li>
   <li class="transp"><a href="#">Transport</a>
    <ul>
     <li class="transp"><a href="French-Fr/Routier.html">Routier</a></li>
     <li class="transp"><a href="French-Fr/Maritime.html">Maritime</a></li>
     <li class="transp"><a href="French-Fr/Aerien.html">Aérien</a></li>
    </ul>

   </li>
  </ul>
 </div>
 <div class="lng">
  <a href="Eng-En/Main.html"><img style="height:auto; width:auto; max-width:45px; max-height:45px;" src="Images/Eng.png"/></a>
 </div>
 <div class="mainWlcm">
  <div class="Bienvenudado">
   <p class="h1"><img style="height:auto; width:auto; max-width:245px; max-height:145px;" src="Photos/bv.gif"></p><br>
   <p>
   <strong>ONLINE SHIPPING</strong> vous propose le monde à portée de main. En étroite collaboration avec les armateurs nous saurons vous proposer 
   la solution la mieux adaptée à vos besoins. Nos collaborateurs sont à votre écoute pour vous assister.<br><br> 
   <a href="Apropos.html"> Savoir plus > </a>
   </p>
  <div class="slide">
   <img id="1" src="Images/1.jpg">
   <img id="2" src="Images/2.jpg">
   <img id="3" src="Images/3.jpg">
   <img id="4" src="Images/4.jpg">
   <img id="5" src="Images/5.jpg">
  </div>
   <a class="left" onclick="prev(); return false;" href="#"> << </a>  
   <a class="right" onclick="next(); return false;" href="#"> >> </a>
  </div>
 </div>
<div class="contactDiv">
 <form id="frm" action="MAILTO:salma.rafai@hotmail.fr" method="post" enctype="text/plain">
  <input type="text" placeholder="Tapez ici votre nom"/><br><br>
  <input type="email" placeholder="Tapez ici votre email"/><br><br>
  <textarea placeholder="Tapez ici votre message"/></textarea><br><br>
  <input type="submit" class="btn" value="Envoyer"/>
 </form>
<div class="contactImg">
 <img id="imgCnt"src="Photos/email.png">
</div>
</div>
<div class="bgfooter">
 <div class="Plan">
  <h4>Plan du site :</h4>
  <ul>
   <li><a href="#">Acceuil</a></li>
   <li><a href="French-Fr/Apropos.html">A propos</a></li>
   <li><a href="#">Transport</a>
    <ul>
     <li class="T"><a href="French-Fr/Routier.html">Routier</a></li>
     <li class="T"><a href="French-Fr/Maritime.html">Maritime</a></li>
     <li class="T"><a href="French-Fr/Aerien.html">Aérien</a></li>
    </ul>
   </li>
  </ul>
 </div>
 <div class="tel">
  <p>
   <h4>Ligne directe :<strong> 0540093259</strong></h4>
   <h4>                Fax :<strong> 0522246098</strong></h4>
   <h4>               Gsm :<strong> 0656451741<br>
                             0661631517</strong></h4>
   <h4>           Autres :<strong> 0522246097<br>
                             0522242210<br>
                             0522406099</strong></h4>
  </p>
 </div>
 <div class="adr">
  <p>
  19 Rue Zoubair Ibnou Alouam<br>
  3 éme ETG appt 9. Casablanca.<br>
  Maroc.<br><br>
  <span>info@onlineshippingmaroc.com</span>
  </p>
 </div>
</div>
</div>

</body>
<script language="Javascript">
$("#imgCnt").click(function()
{
 $("#frm").animate({width: 'toggle'});
}
);
</script>
</html>