problems with scroll and position

I'm trying to do a page that's divided in two big divs that contains information.

One of this divs is the actual page (width:910px), and the other is a pane that is positioned FIXED in the html and is (width:400px).

So the second 开发者_运维百科div is over the first.

The thing is that i'm trying to put overflow auto in the two divs and the two scrolls appears at the right of the navegator, and I need that the scroll of the first div could appear in the left of the second div (the one thats positioned fixed and is over the first div).

this is my code:

body div id="user_id" (full of code with the page content) /div

div id="pane"(the content of div pane) /div

then the css:

id pane { background: none repeat scroll 0 0 #282829; bottom: 0; position: fixed; right: 0; top: 0; width: 450px; font-family: HelveticaNeue; font-size: 14px; overflow: auto;}

id user_id {width: 910px; float: left; margin-top: 80px; margin-left: 10px; position: fixed; overflow: auto; }

like this i get the two scrols but the two of them are at the right of the browser. I need that the id_user can have the scroll at the side of pane and floating with it

anyone knows how can i do this??? thanks!

Wouldn't it be better to fix the width of the other div too? For example:

<div id="container">
    <div id="div1"></div>
    <div id="div2"></div>
</div>

And then in your CSS:

div#container {
    width: 960px;
    margin: 0 auto;
}
    div#container div#div1 {
        width: 560px;
        float: left;
        overflow: auto;
    }
    div#container div#div2 {
        width: 400px;
        float: left;
        overflow: auto;
    }