title: With position: absolute I'm not able to scroll down my content
body: <p>Im here with a difficult problem that Im not see how I can solve this.
  Im develloping a left side menu using jQuery, and I already have this working.</p>
  
  <p>The problem is, If I have my div #content with only position:fixed, the menu is working fine, but with this position:fixed I can´t scroll my other content, I have the content of my page blocked.</p>
  
  <pre><code>#content {position:absolute; position:fixed;}
  </code></pre>
  
  <p>If I put position:fixed and also position:absolute, I already can scroll down my content, but when I open my side menu I also can go to my content and its a bit confused, because I have acess to the menu items but also to the content.</p>
  
  <p>So I want my content blocked (fixed) only when the side left menu is open, otherwise I waant to scroll down my content.</p>
  
  <p>Do you know how I can do this??</p>
  
  <p>this is my fiddle:
  <a href="http://jsfiddle.net/3Gezv/9/" rel="nofollow">http://jsfiddle.net/3Gezv/9/</a></p>
  
  <p>My html:</p>
  
  <pre><code>&lt;div id="menu"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu Item 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu Item 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu Item 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt; 
  &lt;/div&gt;
  &lt;div id="content"&gt;
      &lt;div id="menubar"&gt;
          &lt;div id="open_menu"&gt;Menu&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My css:</p>
  
  <pre><code>* {
      padding: 0px;
      margin: 0px;
  }
  
  #menubar {
      width:100%;
      background-color:gray;
      color: #fff;
      padding: 10px;
  }
  
  #open_menu {
      cursor:pointer;
  }
  
  #menu, #content {
      display:inline;
  }
  
  #menu li a {
      padding: 10px;
      display: block;
  }
  
  #content {
      width:100%;
      background-color: #fff;
      z-index: 5;
      position: fixed;
      left: 0px;
      height: 100%;
      -webkit-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
      moz-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
      o-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
      box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
  }
  
  #menu {
      float:left;
      width: 350px;
      height: 100%;
  }
  
  #menu li {
      background-color:gray;
      border-bottom: 1px solid #888;
  }
  </code></pre>