fixed position of inner div related to its container

Question

Hi, if have the following code:

<div id="container" style="position:relative; width:300px; height:300px; overflow:scroll;">
    <div id="header">
    </div>
    <div>
    a table of contents
    </div>
</div>

how do i make the inner div with the id "header" follows when i scroll down the outer div "container"? TIA Lina

Answer 1

Put the header outside of the container. It's useless to let it in since you don't want to display it inside.

Answer 2

I found the answer to exactly what i want to do here: http://www.cubido.at/Default.aspx?tabid=176&EntryID=8 although i thought the answer is going to be simpler, but seems that css alone won't fix it, although it would be very helpful to have something like "position: fixed;" that works not only relative to page but to containing element...