тело меньше ширины, чем внутри элементов

Question

Я пытаюсь получить следующую разметку:

body
 #container
  #content

, где тело имеет полную ширину и имеет фоновый щелчок справа внизу.

, где контейнер имеет заданную ширину960px и min-width 600px, расположенные в верхнем левом углу страницы.

, где контент имеет заданную ширину 600px и также расположен в верхнем левом углу страницы.с полем «100px 0px 0px 100px»

Когда я пытаюсь это сделать, тело выглядит хорошо с прокруткой для прикрепления фона, расположенной внизу справа.Тем не менее, когда размер браузера изменяется до ширины менее 960 пикселей (или любой другой ширины элемента контейнера), тело останавливается на ширине браузера, вытесняя субэлементы.

Я хотел бы получитьтело всегда должно быть не меньше ширины подэлементов, а не ломаться.У меня нет плавающих элементов, которые могут разбить страницу, поэтому я не понимаю, почему она так себя ведет.

Answer 1

Я сделал здесь какое-то решение:

jsFiddle

Поместите min-width в элемент html, а не в тело. Затем, если область просмотра слишком мала, фоновое изображение будет перемещаться из области просмотра и будет видно при прокрутке.

Это то, что вы хотите?