Centered div that doesn't stick to the edge but is able to resize with content

Here's what I'm trying to achieve: I have a centered lay out with a sidebar on the right and a container wrapping the sidebar and the content. The container however has a grungy look and the borders extend out. The content is 960px and the backdrop for the content is 1200px. When I center it using the normal margin-right/left auto method it is centered but when someone with a browser smaller than 1200px visits the site it will be pushed off to the side.

Since the content in the page will be dynamic using an absolute div for this would not give me the result I'm looking for since it won't resize if there is more content inside of it.

Any开发者_运维百科 solutions to this issue or am I going to have to get my hands dirty in javascript?

Link to an example: http://duedate.wordtgetest.be/TEMP_LAYOUT/

If that's an option: Place the image you're currently using in the 1200px wrapper in the body-Tag and use background-position:top center; background-repeat:no-repeat; and just remove the wrapper

body {
  background-image:url(bigBackdrop.jpg);
  background-repeat:repeat-y;
  background-position:top center;
}

#content{
  width: 960px
  margin:0px auto;
  background-image:url(bigBackdrop.jpg);
  background-repeat:repeat-y;
  background-position:top center;
}

That should to the trick.

Here's what you want to achieve: http://www.fabsn.de/trash/stackoverflow/ThomasVanNuffel/index.htm

You don't always need to use a container div to center content with a background. You can just as easily apply margins to the body element and use a centered image. Something perhaps like this:

body {
  margin: 0 auto;
  width: 960px;
  background-image: url(myimage.png);
  background-repeat: repeat-y;
  background-position: top;
}