title: How can I implement a fixed sidebar?
body: <p>I have a situation like this:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;test&lt;/title&gt;
      &lt;/head&gt;
      &lt;style&gt;
          #wrapper { width: 1100px; margin: 0px auto; }
          #wrapper #stream { width: 790px; float: left; border: 1px solid red;  }
          #wrapper aside { width: 270px; float: left;  border: 1px solid red; }
      &lt;/style&gt;
      &lt;body&gt;
          &lt;section id="wrapper"&gt;
              &lt;section id="stream"&gt;
                  some text...
              &lt;/section&gt;
              &lt;aside&gt;
                  &lt;ul&gt;    
                      &lt;li&gt;something&lt;/li&gt;
                      &lt;li&gt;something&lt;/li&gt;
                      &lt;li&gt;something&lt;/li&gt;
                      &lt;li&gt;something&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/aside&gt;
          &lt;/section&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and I don't want the sidebar to move even if the page scrolls down.</p>
  
  <p>I tried setting the aside's position to fixed but so I can't set properly the distance from left.</p>
  
  <p>I found a solution with jQuery:</p>
  
  <pre><code>$(document).ready(function () {
      $(window).scroll(function () {
          $("aside").css('top', $(window).scrollTop()+'px');
      });
  })
  </code></pre>
  
  <p>but with Chrome and Safari the scroll of the aside is piecewise.</p>
  
  <p>Any help?</p>
  
  <p>========================</p>
  
  <p><strong>SOLUTION:</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;test&lt;/title&gt;
      &lt;/head&gt;
      &lt;style&gt;
      #wrapper {
  
          width: 1100px;
          margin: 0px auto;
      }
      #stream {
        width: 800px;
        background: #ccc;
        float: left;
      }
      #sidebar {
      float: left;
        border: 1px solid red;
        width: 200px;
      }
      aside {
        position: fixed;
        top: 20px;
        border: 1px solid red;
      }
      &lt;/style&gt;
      &lt;body&gt;
      &lt;section id="wrapper"&gt;
          &lt;section id="stream"&gt;
                  some text...
          &lt;/section&gt;
          &lt;section id="sidebar"&gt;
            &lt;aside&gt;
                  &lt;ul&gt;    
                      &lt;li&gt;something&lt;/li&gt;
                      &lt;li&gt;something&lt;/li&gt;
                      &lt;li&gt;something&lt;/li&gt;
                      &lt;li&gt;something&lt;/li&gt;
                  &lt;/ul&gt;
            &lt;/aside&gt;
          &lt;/section&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>