Problem with Div/Box when scolling Up or Down

I have used position: fixed; so the box stay at the same place when scrolling up or down.

Problem is Categories (div) is not showing all the content when it large. Content missing at the bottom of the Categories

See example: http://jsfiddle.net/Dyx22/

<div style="background-color:pink; height:150px; margin-bottom:10px">header </div>

<div id="side_manu" style="float:left; width:190px;  position: fixed; margin-bottom:300px;">
    <div style="border:1px solid black"> 
       Categories 
                 <div style="padding:10px"> Cat 1 </div>
                 <div style="padding:10px"> Cat 2 </div>
                 <div style="padding:10px"> Cat 3 </div>
                 <div style="padding:10px"> Cat 4 </div>
                 <div style="padding:10px"> Cat 5 </div>
                 <div style="padding:10px"> Cat 6 </div>
                 <div style="padding:10px"> Cat 7 </div>
                 <div style="padding:10px"> Cat 8 </div>
                 <div style="padding:10px"> Cat 9 </div>
                 <div style="padding:10px"> Cat 10 </div>
                 <div style="padding:10px"> Cat 11 </div>
                 <div style="padding:10px"> Cat 12 </div>
                 <div style="padding:10px"> Cat 13 </div>
                 <div style="padding:10px"> Cat 14 </div>
                 <div style="padding:10px"> Cat 15 </div>
                 <div style="padding:10px"> Cat 16 </div>
                 <div style="padding:10px"> Cat 17 </div>
                 <div style="padding:10px"> Cat 18 </div>
    </div>
</开发者_如何学运维div>

<div id="itemlist" style="float:left; width:600px; margin-left:200px; margin-right:10px; ">
       <div style="width:600px; background-color:yellow; padding: 10px;"> 
          <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 1 <br /> Item 1 <br /> Item 1</div>
          <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 2 <br /> Item 2 <br /> Item 2</div>
          <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 3 <br /> Item 3 <br /> Item 3</div>
          <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 4 <br /> Item 4 <br /> Item 4</div>
          <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 5 <br /> Item 5 <br /> Item 5</div>
          <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 6 <br /> Item 6 <br /> Item 6</div>
          <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 7 <br /> Item 7 <br /> Item 7</div>
          <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 8 <br /> Item 8 <br /> Item 8</div>
          <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 9 <br /> Item 9 <br /> Item 9</div>
       </div>
</div>

<div id='display_cart' style="width:190px; float:left; font-size:12px; background-color:green "> Cart Info.</div>

The content is there, but because the div is fixed, you can never scroll down to see anything that is at the bottom of the box.

If possible, I would read a little more about page layouts and css - for example you are using a lot of DIV's here where it would be best to use lists and there is a lot of inline css that could be replaced with a couple of lines of css.

----Edit----

Assuming you want to keep this design, one way you could get around it (although maybe not the most user-friendly or aesthetically pleasing) is to set a height for the side-menu and setting overflow to auto.

So you would replace the "side_manu" div would be as follows:

<div id="side_manu" style="float:left; width:190px;  position: fixed; margin-bottom:300px; height: 75%; overflow: auto; border:1px solid black"> 
   Categories 
             <div style="padding:10px"> Cat 1 </div>
             <div style="padding:10px"> Cat 2 </div>
             <div style="padding:10px"> Cat 3 </div>
             <div style="padding:10px"> Cat 4 </div>
             <div style="padding:10px"> Cat 5 </div>
             <div style="padding:10px"> Cat 6 </div>
             <div style="padding:10px"> Cat 7 </div>
             <div style="padding:10px"> Cat 8 </div>
             <div style="padding:10px"> Cat 9 </div>
             <div style="padding:10px"> Cat 10 </div>
             <div style="padding:10px"> Cat 11 </div>
             <div style="padding:10px"> Cat 12 </div>
             <div style="padding:10px"> Cat 13 </div>
             <div style="padding:10px"> Cat 14 </div>
             <div style="padding:10px"> Cat 15 </div>
             <div style="padding:10px"> Cat 16 </div>
             <div style="padding:10px"> Cat 17 </div>
             <div style="padding:10px"> Cat 18 </div>

• Please note the added height and overflow parameters, and that I have removed your extra border div and added the border property to the "side_manu" div.

i think you just have to remove any unnecessary header or padding among your content to fit it in like this:

http://jsfiddle.net/Dyx22/6/