title: Navigation menu that only follows screen vertically not horizontally
body: <p>You can see my problem on the image here:</p>
  
  <p><img src="https://i.stack.imgur.com/sCO4j.png" alt="enter image description here"></p>
  
  <p>When I minimized my website, I discovered that my contents flows over my navigation when I use the vertical scroll bar. 
  I know I could just use a z-index to make it go behind. But I want to be able to scroll to the right and see the rest of the page to the right, without scrolling the "content".</p>
  
  <p>Right now, this is only run locally. So I can't give you a link to the page. </p>
  
  <p>Here's the stripped HTML:</p>
  
  <pre><code>&lt;div id="main-wrapper"&gt;
  &lt;div id="menu-wrapper"&gt;
      &lt;div id="logo"&gt;
          &lt;a href="index.html"&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="nav"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="content-wrapper"&gt;
      &lt;div id="sub-content"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And the CSS for the menu and content area:</p>
  
  <pre><code>#menu-wrapper 
  {
  position: fixed;
  width: 223px;
  height: 100%;
  }
  
  #content-wrapper 
  {
  width: 698px;
  min-height: 500px;
  position: absolute;
  left: 223px;
  top: 41px;
  }
  </code></pre>
  
  <p>I hope that you can help me out, and please let me know if you need any more information</p>