title: CSS menu that scrolls aside content
body: <p>How can I make the menu scroll aside the content.</p>
  
  <p><strong>NOTE the content and menu are inside a container box(class=boxed) that is aligned the center of the page.</strong> Above this container there is a header with 100% page width.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.boxed{
      width:100%;
      max-width: 1154px;
      margin: 0 auto;
      position: relative;
      }
              
      .boxed .sidebar{
      position: relative;
      width: 25%;
      float: left;
      }   
          </code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>The HTML look something like this:</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
    &lt;header&gt;header content&lt;/header&gt;
    &lt;div class="boxed"&gt;
      &lt;nav id="sidebarmenu"&gt;
        &lt;ul id="sidebar"&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;div class="content"&gt;content&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body
  &lt;/html&gt;
  </code></pre>