title: Fixed Div overlaps scrollbar of static div
body: <p>I'm having trouble to to style my layout like I want it to. I have a content area <code>#content</code> (the grey you can see in the example image) with a yellow element inside. This div is <code>position:static;height:100%;</code>. Now I have a <code>#left-panel</code> div also, with <code>position:fixed;height:100%;</code>. The problem is, if the content area has not enough space a horizontally scrollbar appears. This will be overlaped of the fixed div. For me it is all logically, but I don't know how to get around this. My scrollbar of the <code>#content</code>-element should be visible the whole width of the window. So it would not be a solution for me to just reduce the width of the content if the panel is in view.</p>
  
  <p>The whole css:</p>
  
  <pre><code>#content{
      width:100%;
      height:100%;
      background:grey;
  }
  #left-panel{
      position:fixed;
      top:0;
      left:0;
      width:300px;
      height:100%;
      overflow-y:auto;
  }
  </code></pre>
  
  <p>Can somebody help me fixing this with pure CSS?</p>
  
  <p><img src="https://i.stack.imgur.com/zqb1s.png" alt="enter image description here"></p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/a2wn8x5z/1/" rel="noreferrer">http://jsfiddle.net/a2wn8x5z/1/</a></p>