How can I make a position:absolute; div inside a position: relative; div work in a layout centered by margin: 0 auto; ?

Question

I have a centered layout using margin:0 auto;, but one of my child divs isn't positioning itself absolutely (relative to its parent). The page looks fine until the window is resized. Then the child div gets pushed to the very right, and the top image (in another div) gets clipped.

What code changes do I need to make?

Here's the CSS:

body {
 padding: 0;
 margin: 0;
 display: table;
 text-align: center;
 font-family:sans-serif;
 background: #FFF url("/images/businessmanbg.jpg") no-repeat center top;
 width: 100%;
}
#wrapper {
 margin: 0 auto;
 position: relative;
}
#container {
 margin: 0 auto;
 text-align: left;
 position: relative;
}
#topbar {
 background: #036 url("/images/topbar.jpg") no-repeat center top;
 border:0;
 position: relative;
 margin-top: -22px;
 padding:0;
 text-indent:-9999px;
 display: block;
 height: 111px;
 width: 100%;
}
#content {
 background: url("/images/copy-bg.png");
 padding: 10px;
 position: absolute;
 margin-left: 900px;
 margin-top: 50px;
 text-align: left;
 width: 450px;
}

Thanks for your help!

EDIT (2:18 PM CDT): At someone else's suggestion, I moved the businessman background to #container, added a fixed width to #container, and added top and right positions to #content. Looks like the positioning's ok, but the background image disappeared. Any idea why?

The example above has been updated with the following CSS (and I deleted the wrapper DIV in the HTML):

    body {
    padding: 0;
    margin: 0;
    display: table;
    text-align: center;
    font-family:sans-serif;
    width: 100%;
}
#container {
    margin: 0 auto;
    text-align: left;
    position: relative;
    background: url("/images/businessmanbg.jpg") no-repeat center top;
    width: 1280px;
    z-index: 1;
}
#topbar {
    background: #036 url("/images/topbar.jpg") no-repeat center top;
    border:0;
    position: absolute;
    top: 0px;
    left: 0px;
    padding:0;
    text-indent:-9999px;
    display: block;
    height: 111px;
    width: 100%;
    z-index: 2;
}
#content {
    background: url("/images/copy-bg.png") repeat scroll 0 0 transparent;
    padding: 10px;
    position: absolute;
    top:120px;
    right:200px;
    width: 450px;
    z-index: 3;
}
ul, li, p {
    font-size: .95em;
    line-height: 1.5em;
}

Answer 1

As you know the width of the absolute positioned element you can set left:50% margin-left:-225px.

This will set the left edge of the container to the middle of its wrapper and then moves it left by half of it's own width. This will work when you know the width of the container but not that of the wrapper.

This is the only method I know of that will work. It's not terribly pretty but hope it works for you!

Answer 2

Not sure what exactly you are trying to acheive. Your wrapper and container div's are not needed at all and try using this as you #content class

#content 
{
  background:url("/images/usi-assist/copy-bg.png") repeat scroll 0 0 transparent;
  float:right;
  padding:10px;
  text-align:left;
  width:450px;

}