title: CSS or JQuery Fixed sidebar in website layout
body: <p>My website is setup with the content structure like this</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="header&gt;&lt;/div&gt;
      &lt;div id="contentwrapper"&gt;
          &lt;div id="content&gt;
          ...
          &lt;/div&gt;
          &lt;div id="sidebar"&gt;
          ...
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I'm trying to make my website behave where sidebar stays in the exact same location relative to where it would be in my static layout. That it's to the right of the Content column, that it's below the header div and above the footer div and that if they shrink the window horizontally that it doesn't move on top of the content column.</p>
  
  <p>I've tried google generic css fixed position etc and haven't been able to find anything that was really working with me so that leads me to ask here. I'm looking for how to handle this with either css or javascript, if it goes the javascript route I'd most prefer JQuery as a base.</p>
  
  <p><strong>Edit</strong> I don't need to support archiac browsers but, I don't care if it works fully in ie6 as long as it doesn't ruin my page and degrades acceptably (like it doesn't sit on the wrong side of the page or on top my header or content)</p>