Changes page size with minimum width and absolute position?

Question

I am working on a resizable page with sidemenu on the right, and it almost works as intended, with this simple example:

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

The problem is that the auto position and min-width do not react as expected. If you drag the browser window less than 500 pixels (as the minimum width is set), the red sidebar continues through the green content.

How to make the sidebar stopped when it reaches the minimum width, fx 500px?

Answer 1

An absolutely div should be inside the minimum width of the div, which should have a relative position

Edit, the best explanation:

For the sidebar: add top: 0 to the red sidebar and place it in the min-width container.

For container: replace margin-right property with padding-right and add position:relative

Answer 2

I have a fix!

Weird:

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