title: fixed div went out of the wrapper
body: <p>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. </p>
  
  <p>The problem is, I made it fixed and then when I scroll it down, it went pass the footer. I used</p>
  
  <pre><code>top:0;
  </code></pre>
  
  <p>and it doesn't went up the footer, but it went up the header. What would be the solution?</p>
  
  <p>This is my html.</p>
  
  <pre><code>  &lt;div class="myheader"&gt;
    &lt;/div&gt;
    &lt;div class="content"&gt;
    &lt;div class="left_side"&gt;
    &lt;/div&gt;
    &lt;div class="right_side"&gt;
    &lt;/div&gt;
    &lt;div class="footer"&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>This is my css:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>There are contents inside the left_side. That's where the texts are. The division that I want to be fixed is <code>&lt;div class="right_side"&gt;</code>.</p>