Scroll - use the page/browser scroll bar to scroll a specific div element only

The problem: I have a layout of the following:

<div class="container">
    <div class="filters1">
    </div>
    <div class="filters1">
    </div>
    <div class="stream">
          <div class="item"/>
          <div class="item"/>
          <div class="item"/>.......
    </div>
</div>

I want the page to have the standard browser scroller but that it would scroll the stream div only

I tried defining the filter1 div's as position:fixed. but this causes some cross-browser problems and resizing issues. (needed chrome css hacks not to talk about IE7)

Is there a standard solution I can use, various searches did not help..开发者_运维问答.

Thanks

By 'fixed' you mean 'position:fixed' or that you gave it a fixed width and lenght? (I don't why this latter option may have such difficult rendering issues). Try

.stream {
width: XXpx;  /*put your width here*/
height: XXpx; /*put height here*/
overflow:scroll;
}

EDIT: sorry misread the question, do you want the WHOLE page having scroll bars or just the DIV .stream?