div absolute positioned on right side goes over left div when window is resized smaller

Question

There is a div on my webpage with the following attributes:

#topright {

position: absolute;
top: 0;
right: 0;
width: 250px;
height: 400px;
background-color: blue;
}

The "topright" div's function is to serve as a navigation bar.

Then, there is the main content div container that holds everything else together.

#maincontainer {

position: absolute;
left: 0;
width: 700px;
}

So my problem is the following: I want the topright div to stick to the top right of the window when the window is being resized. However, I want it to be "limited" when the windows is made smaller, so that it doesn't go over the 700px maincontainer div. Basically, when the window is resized to 700px away from the left side of the screen, I would want the horizontal scroll bar to appear and the topright div not blocking the maincontainer content from the viewer.

I hope someone can help!

Answer 1

这是示例http://jsfiddle.net/mnSGZ/1/