Centrer une page html avec plusieurs calques

Bonjour,

j'essaie en vain de centrer ma page html. pour qu'elle soit centrer à l'écran avec n'importe quelle résolution.

j'ai lu dans les forums qu'il faut faire à l'aide de tableau. le souci, c'est que tout est fini. il me manque juste à centrer la page. donc, je n'utiliserai pas la forme du tableau.

dans d'autres forums, j'ai lu qu'il fait que je creer une div avec le contenu du site puis une règle css. c'est ce que je m'efforce à faire mais je n'y arrive pas. le contenu du site n'est toujours pas centré. je vous transmet les codes html de ma page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BNA</title>
<style type="text/css">
<!--
#en-tete {
position:absolute;
left:202px;
top:2px;
width:800px;
height:100px;
}
#boutons {
position:absolute;
left:0px;
top:150px;
width:1100px;
height:40px;
z-index:2;
background-color: #CCCCCC;
}
#marque {
position:absolute;
left:0px;
top:190px;
width:300px;
height:810px;
z-index:3;
background-color: #999999;
}
#infos {
position:absolute;
left:300px;
top:190px;
width:800px;
height:810px;
z-index:4;
}
#bas {
position:absolute;
left:0px;
top:1000px;
width:1100px;
height:40px;
z-index:5;
background-color: #CCCCCC;
}
body,td,th {
color: #000000;
}
body {
background-color: #F3F3F3;
background-image: url();
}
#en-tete {
position:absolute;
left:0px;
top:0px;
width:850px;
height:100px;
z-index:1;
background-color: #FFFFFF;
}
#boutons {
position:absolute;
left:0px;
top:110px;
width:850px;
height:30px;
z-index:2;
}
.boutons {
}
#Layer1 {
position:absolute;
left:199px;
top:111px;
width:50px;
height:12px;
z-index:3;
}
.boutons {
background-color: #FFFFFF;
border: thin double #000000;
clear: Aucune;
float: Aucune;
height: auto;
width: auto;
color: #FFFFFF;
}
.boutons {
color: #FFFFFF;
text-decoration: none;
}
boutons {
color: #FFFFFF;
text-decoration: none;
background-color: #E0DFE3;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
}
.lien {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #FFFFFF;
}
#Layer2 {
position:absolute;
left:107px;
top:110px;
width:90px;
height:25px;
z-index:3;
}
#Layer3 {
position:absolute;
left:301px;
top:110px;
width:95px;
height:25px;
z-index:4;
}
#Layer4 {
position:absolute;
left:501px;
top:111px;
width:95px;
height:25px;
z-index:5;
}
#Layer5 {
position:absolute;
left:711px;
top:109px;
width:90px;
height:25px;
z-index:6;
}
.Style2 {color: #000000}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
}
#Layer6 { position:absolute;
left:0px;
top:150px;
width:200px;
height:800px;
z-index:7;
background-color: #E0DFE3;
}
#Layer6 { border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
#Layer7 {position:absolute;
left:200px;
top:150px;
width:650px;
height:800px;
z-index:8;
background-color: #EBEBEB;
}
#Layer7 {border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
#Layer8 {}
#Layer8 {position:absolute;
left:0px;
top:960px;
width:850px;
height:25px;
z-index:9;
background-color: #CCCCCC;
border: 1px solid #000000;
}
#Layer9 {
position:absolute;
left:342px;
top:329px;
width:390px;
height:470px;
z-index:10;
background-image: url(images/chantier.jpg);
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}

#conteneur
{
width: 850px;
margin-left: auto;
margin-right: auto;
}

-->
</style>
</head>

<body>
<div id="conteneur">
<div id="en-tete">
<div align="left"><img src="images/entete2.jpg" width="850" height="100" /></div>
</div>
<div id="boutons">
<h3 align="left"><a href="BNA/acces/images/entête.jpg" class="boutons"></a> </h3>
</div>
<div id="Layer2">
<div align="left"><a href="index.html">Accueil</a></div>
</div>
<div id="Layer3">
<div align="left"><a href="occasions/occasions1.html">Occasions</a></div>
</div>
<div id="Layer4">
<div align="left"><a href="acces/acces1.html">Plan d'accès</a> </div>
</div>
<div id="Layer5">
<div align="left"><a href="contact/contact.php">Contact</a></div>
</div>
<div id="Layer7"></div>
<div id="Layer9"></div>
<p align="left"> </p>
<div id="Layer8"></div>
<p align="left"> </p>
<p align="left"> </p>
<p align="left"> </p>
<p align="left"> </p>
<div id="Layer6">
<p align="left"> </p>
</div>
<p align="left"> </p>
</div>

</body>

</html>

merci pour vos réponses.

cordialement.

Configuration: Windows XP
Internet Explorer 7.0