fixed div went out of the wrapper

Question

I have this side menu that I wanted to be fixed so it will follow the user when the user scrolls. I'm planning to put jumping targets inside it because the contents are very long.

The problem is, I made it fixed and then when I scroll it down, it went pass the footer. I used

top:0;

and it doesn't went up the footer, but it went up the header. What would be the solution?

This is my html.

  <div class="myheader">
  </div>
  <div class="content">
  <div class="left_side">
  </div>
  <div class="right_side">
  </div>
  <div class="footer">
  </div>

This is my css:

.myheader{
float:left;
width:100%;
height:190px;
background: #fff url(img/blackorchid.png) repeat scroll 0 0;
}

.content{
float:left;
background: #fff url(img/linen.png) repeat scroll 0 0;
height:auto;
margin-left:120px;
width:1100px;
}

.left_side{
width:800px;
float:left;
}

.right_side{
width:300px;
height:500px;
background-color:yellow;
float:right;
position:fixed;
top:0;
}

There are contents inside the left_side. That's where the texts are. The division that I want to be fixed is <div class="right_side">.

Answer 1

Not sure I am fully following, but if you want it to be fixed to the foot of the page, then why not set bottom to 0. See here: jsdfiddle. I also set the right to 0 to make it fix to the right of the page.

.right_side{
    width:300px;
    height:500px;
    background-color:yellow;
    position:fixed;
    bottom:0;
    right:0;
}

I added the fill div just to make sure that the page scrolled.

If you want some space from the bottom, then just specify a margin. See this updated fiddle: jsfiddle