orange: footer richtig unter ein zentriertes div platzieren

Beitrag lesen

Hallo,
ich möchte gern unter einen horizontal und vertikal zentrierten Content einen footer platzieren, der über die gesamte Bildschirmbreite laufen soll. Ich habe es bis jetzt folgendermaßen mit CSS gelöst: Mit "margin", "positition","top" und "left" habe ich den Content mit einer festen Breite in die Mitte gesetzt. Den footer habe ich 5000Pixel breit gemacht, damit er auf alle Fälle nicht beschnitten wird und ihn dann mit der gleichen Strategie wie den Content platziert (nur etwas unterhalb). Damit kein Scrollbalken durch die hohe Breite auftaucht, habe ich den Scrollbalken per CSS ausgeblendet.Ich wäre sehr dankbar, wenn einer
eine elegantere Lösung parat hätte...
vereinfacht schaut die Site so aus:

HTML:

<div id="Box">
</div>
<div id="footer">
</div>
</body>

CSS:

body { overflow: hidden; }

#Box {
width:960px;
height:500px;
background-color: #F30;
top:50%;
left:50%;
position:absolute;
margin-left:-480px;
margin-top:-250px;

}

#footer {
width:5000px;
height:30px;
background-color: #FF0;
top:50%;
left:50%;
position:absolute;
margin-left:-2500px;
margin-top:280px;

}