title: HTML/CSS: scroll div without setting position to fixed or absolute
body: <p>so I have the following problem: I want to add a sidebar with a lot of content to my webpage. So the sidebar (div) should be scrollable and should also hide upon click. 
  To the right of the sidebar is my content. The content should always be to the right of the sidebar and the sidebar should never overlay parts of the content. </p>
  
  <p>Here's my css: </p>
  
  <pre><code>div.sidebar {
      position: fixed; 
      float:left;
      left:0rem;
      top:0rem;
      bottom:1.2rem;
      width:21rem;
      background-color:rgb(110, 110, 110);
      z-index:999;
      overflow-y:scroll;
  }
  div.content {
      border-width: 0;
      margin: 2em;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      background-color: transparent;
      font-size: 180%;
      line-height: 130%;
  }
  </code></pre>
  
  <p>If the css is like that with position:fixed (or absolute) the sidebar is scrollable and the body does not scroll. But the sidebar hides parts of the content. <br>
  If I remove the "position:fixed" from the .sidebar the content aligns right of the sidebar but the sidebar is not scrollable anymore (now the whole page has a scrollbar). 
  Specifying overflow: hidden for the body of the page didn't help. Neither did removing any of the left, top, bottom, float etc. tags. What am I missing?</p>
  
  <p>How can I achieve a sidebar that is scrollable but does not overlay the content. Thanks in advance for any help!</p>