Problème avec les résolutions

Bonjour, je suis en train de faire un design et on m'a demander de le rendre extensible pour tout les navigateurs.
Je l'ai mis en extensible mais j'ai un problème.

Une image pour comprendre.

https://user.oc-static.com/files/206001_207000/206292.jpg

La c'est comme il le faut.

Maintenant quand je prend un résolution inférieure à la mienne (1440x900) tout est décalé :( .
Ce qui est entouré en noir passe en dessous ou alors n'est plus centré.

Comment je peut faire pour que sa puisse passer sur toutes les résolutions.

Mon CSS

body
{
width: 100%;
margin: 0 auto;/*pour ne pas avoir de marges par défaut en haut et en bas*/
background-image: url("../images/motif_fond.png");
background-repeat: repeat;
}

#en_tete
{
background-image: url("../style/noel/bordure.png");
background-repeat: repeat:x;
}

#bordure
{
height: 200px;
background-image: url("../style/noel/headerradiogamer.png");
background-repeat: no-repeat;
}

#menu
{
height: 30px;
background-image: url("../style/noel/menu.png");
margin-bottom: 10px;
}

#menu p{
margin-top: 0;
}

#sous_menu a:hover
{
background-image:url("../style/noel/survol.png");
color:#bababa;
}

#sous_menu a
{
display: block;
float: left;
height: 32px;
line-height: 32px;
padding: 0 5px;
color: #595959;
text-decoration: none; /* Les liens ne seront plus soulignés */
}

#sous_menu
{
font-family:tahoma;
}

.sous_menu
{
color:#595959;
}

#lecteur
{
height: 300px;
background-image:url("../style/noel/lecteur.png");
background-repeat: no-repeat;
margin-left: 150px;
}

.auto
{
float: left;
margin-top: 125px;
margin-left: 310px;
}

.manuel
{
float: right;
margin-top: 50px;
margin-right: 850px;
}

#cadre1
{
width: 200px;
margin-bottom: 20px;
background-repeat: no-repeat;
padding-top: 10px;
text-decoration: none; /* Les liens ne seront plus soulignés */
padding-left:15px;
float: left
}

#hautpartenaire
{
background-image:url("../style/noel/hautpartenaire.png");
background-repeat: no-repeat;
width: 200px;
height: 50px;
}

#partenaire
{
background-image:url("../style/noel/partenaire.png");
background-repeat: repeat-y;
width: 200px;
padding-left: 20px;
}

#baspartenaire
{
background-image:url("../style/noel/baspartenaire.png");
background-repeat: no-repeat;
width: 200px;
height: 50px;
}

#corps
{
float: left;
padding-left: 20px;
padding-right: 20px;
width: 580px;
background-image:url("../style/noel/corps.png");
min-height: 300px;
background-repeat: repeat-y;
margin-left: 20px;
}

#hautcorps
{
float: left;
background-image:url("../style/noel/titre.png");
background-repeat: no-repeat;
width: 580px;
height: 80px;
margin-left: 20px;
}

#bascorps
{
float: left;
background-image:url("../style/noel/bascorps.png");
background-repeat: no-repeat;
width: 580px;
height: 80px;
margin-left: 235px;
}

#pied_de_page
{
float: left;
padding-top: 100px;
}

/**********************************************************************************/
a
{
color: black;
text-decoration: none; /* Les liens ne seront plus soulignés */

}
/**********************************************************************************/

Merci de vos réponse bonne journée :) .