title: Fixed position div relative to centered content div?
body: <p>I am a CSS beginner.
  I want a half transparent centered div with the main content. Below it should be a fixed div containing the table of contents.</p>
  
  <p>Below is my attempt on this. This works with a certain browser size. But when the size of the browser window changes, the table of content moves. </p>
  
  <p>I want the table of contents to stay at a fixed distance to the main div.</p>
  
  <p><a href="http://jsfiddle.net/vMAQz/" rel="nofollow noreferrer">jsFiddle link</a></p>
  
  <p>With this window size everything looks ok:
  <img src="https://i.stack.imgur.com/kiYYs.png" alt="with this window size everything looks ok"></p>
  
  <p>Decreasing the window size moves toc under content div:
  <img src="https://i.stack.imgur.com/ev7gK.png" alt="decreasing the window size moves toc under content div"></p>
  
  <p>html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Testpage&lt;/title&gt;
      &lt;link rel='stylesheet' href='css/testpage.css'&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="contenttable"&gt;
          &lt;h1&gt;Contents&lt;/h1&gt;
          &lt;a href="#"&gt;Content 01&lt;/a&gt;&lt;br&gt;
      &lt;/div&gt;
      &lt;div id="content"&gt;  
          some text
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#content{
      height: 1000px;
      width:  320px;
      position: relative;
      top: 50px;
      left: 50%;
      margin-left: -160px;
      background-color: cyan;
          }
  
  #contenttable{
      padding: 12px;
      width:100%;
      height:200px;
      position: fixed;
      background-color: yellow;
      top: 125px;
      left: 6%;
  }
  
  #contenttable a{
      position: relative;
      top: 0px;
      left: 66%;
  }
  
  #contenttable h1{
  
      position: relative;
      top: 0px;
      left: 66%;
  }
  </code></pre>