body less width then inside elements

Question

Hello,

I'm trying to have the following markup:

body
 #container
  #content

where body is full width and has a background snapping to the bottom right.

where container has a set width of 960px and min-width of 600px, located in the top left corner of the page.

where content has a set width of 600px and is also located in the top left corner of the page. with a margin "100px 0px 0px 100px"

When I try to do this, the body looks good with a background-attachment scroll positioned bottom right. However, when the browser is resized to a width of less then 960px (or any other width of the container element) the body stops at the width of the browser, leaking the subelements out.

I would like to have the body always be at least the width of the subelements, instead of it breaking. I have no elements floating, which could break up the page, so I don't see why it is behaving this way.

image indicating the problem

image indicating my wish

Answer 1

why not assign min-width to the body?

Answer 2

I've made a sort of solution over here:

jsFiddle

Put the min-width on the html element, not the body. Then if the viewport is too small, the background-image will move out of the viewport and is visible when you scroll.

Is this what you want?