Fixed Position Sidebar with separate scroll bar?

Question

I have a simple CSS setup but am not sure how to go about fixing my problem.

I have a fixed sidebar on the left, and a content pane on the right.

The left side is for a table of contents for the right side, so the user can easily jump to various locations within the report on the right side.

I want the side bar to stay fixed, as the report is very long (hence the TOC) and if it scrolls with the main content then its fairly worthless as they would always have to scroll to the top to access it.

The issue I'm running into is that in many cases the TOC is too long and is going past the bottom of the sidebar, so i need to have my sidebar have an independent scrollbar from my main content. I know this was possible with frames, but how do you go about doing it with CSS?

Code below

<div style="width:100%;" class="wrapper">
        <div class="contentWrapper" style="width:100%;">
            <form id="FormData" runat="server" style="background-color:whitesmoke" >
              <div id="leftnav" runat="server" class="left-nav" style="width:20%; float:left; position:fixed; height:100%; background-color:#0071c5; top: 0px; left: 0px;">      
                     <div id="tableofcontents" runat="server"></div>
              </div>

              <div id="content" runat="server" class="content" style="width:80%; float:right;">

             </div>  
           </form> 
        </div>
    </div>

Answer 1

Found it, needed to use the

overflow-y:scroll

style modifier on the left-nav div.