Изменяемый размер страницы с минимальной шириной и абсолютной позицией?

Question

Я работаю над страницей с изменяемым размером с боковым меню справа, и она почти работает, как предполагается на этом простом примере:

http://pastehtml.com/view/1do8cy9.html

Проблема, однако, заключается в том, что автоматическое положение и минимальная ширина не реагируют должным образом. Если вы перетащите окно браузера меньше 500 пикселей (так как для min-width установлено значение), красное боковое меню будет продолжено поверх зелёного содержимого.

Как заставить боковую панель остановиться, когда она достигает минимальной ширины, fx 500px?

Answer 1

Абсолютный позиционированный div должен быть внутри минимальной ширины div, которая должна иметь относительную позицию

Правка, лучшее объяснение:

Для боковой панели: добавить top: 0на красную боковую панель и поместите ее в контейнер min-width.

Для контейнера: замените свойство margin-right на padding-right и добавьте position:relative

Answer 2

У меня есть исправление!

Это странно, хотя:

body{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    min-width:1300px;
    width:100%;
    overflow:auto;
    padding:0;
    margin:0;
}