Fertiges Layout zentrieren

[Tom78]

Links sind 10px Abstand. Rechts je nach Auflösung...
Ich will aber nicht, dass alles 10px left anfängt...sondern zentriert. Je nachdem, wie halt die Auflösung eingestellt ist...es soll immer zentriert sein.

Momentan ist es so:

xHHHHH
xMMMMM
xCCCCC
xFFFFF

H = header, M = menu, C = content, F = footer
x = 10px Abstand vom Rand -> H, M usw. beginnen jeweils bei 10px mit left:10px

Es soll aber so sein:

xxxHHHHHxxx
xxxMMMMMxxx
xxxCCCCCxxx
xxxFFFFFxxx

H, M, C und F zentriert. Bei eine niedrigeren Auflösung ist halt nur x Abstand links und rechts neben H, M usw. ... bei einer höheren sind es mehrere xs.

Code:

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
background-color: #e27201;

}

#top1 {
position:absolute;
left:10px;
top:10px;
width:783px;
height:134px;
background-color: #000099;
background-image: url(design_top.jpg);
background-repeat: no-repeat;
}

#top2 {
position:absolute;
left:793px;
top:10px;
width: 117px;
height: 134px;
background-image: url(bluebackground.jpg);
}

#menu {
position:absolute;
left:10px;
top:144px;
width:900px;
height: 30px;
background-color: #000000;
}

#content1 {
position:absolute;
left:10px;
top:174px;
width:900px;
height: 400px;
background-color: #000099;
}

#content2 {
position:absolute;
left:60px;
top:210px;
width: 800px;
height: 276px;
background-image: url(start.jpg);
background-repeat: no-repeat;
}

#foot1 {
position:absolute;
left:10px;
top:574px;
width: 900px;
height: 30px;
background-color: #000000;
}

#foot2 {
position:absolute;
left:30px;
top:584px;
color: #ffffff;
}