I can't test my ideas because I haven't got your images to test with.
However, you have the body background image top center so That's OK; it will centralise in large windows (but in a small window equal parts from left and right sides will be cut off).
You want your content to centralise the same way, so put all of it in a containing div with position: relative with a width and margin: auto to make it centralise like the body background image. This will mean that your #nav and #content position: absolute divs will take their positions from the top left corner of the containing div, wherever it is, and move with it in different size windows, so you may have to edit their top and left positions.
<body>
<div style="position: relative; width: 680px; margin: auto;">
<div id="nav">
..........
<div id="ad"</div>
</div><!--end of containing div-->
</body>
</html>
max-width:680px; margin-left:auto; margin-right:auto in the body style has no effect, as far as I know; the body is always full width but you can give fixed or % margins.
Use a fixed width at first with the containing div because max-width doesn't work in IE6. There are hacks to get round this.
Put a doctype above the <html> tag, say
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
from here:-
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.