Question

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/

Answer 1

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