title: Make a Div with relative position go under the footer div when scrolling
body: <p>i'm really not very familiar with CSS and HTMl so take it easy with me
  I'm editing a purchased template, and i'm running into a little problem, you can check how it looks right here and understand my problem: <a href="https://dl.dropbox.com/u/10843829/SITE%20INFORBYTE/shortcodes-text.html" rel="nofollow">https://dl.dropbox.com/u/10843829/SITE%20INFORBYTE/shortcodes-text.html</a></p>
  
  <p>The problem is:
  I've got the sidebar div, and i <strong>made it to move along with the page with the "position:fixed"</strong> attribute on it's div...
  The thing is, now <strong>it scrolls over the footer div</strong>.
  I tried to follow this: <a href="http://css-tricks.com/scrollfollow-sidebar/" rel="nofollow">http://css-tricks.com/scrollfollow-sidebar/</a> but it didn't work out really well. </p>
  
  <p>Now some code for deeper understandment of my problem.</p>
  
  <p><strong>Source Code</strong></p>
  
  <pre><code>&lt;div class="grid_4 sidebar " style="position:fixed" id="sidebar"&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>sidebar widget container - CSS</strong></p>
  
  <pre><code>    .sidebar h3 {
      font-size:14px;
      color:#333333;
      font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      font-weight:bold;
      margin-bottom:10px;
      text-transform:uppercase;
      text-shadow:1px 1px 1px #fff}
  
  .sidebar .widget-container h3 {
      margin-left:40px}
  
  .footer .widget-container h3 {
      font-size:15px;}
  
  .footer .widget-container {
      color:#848484}
  
  .footer .widget-container a {
      color:#fff}
  
  .sidebar ul, .sidebar ol {
      margin:0;
      padding:0}
  
  .sidebar ul li {
      list-style:none}
  
  .sidebar_space {
      padding:10px }
  
  .sidebar .box,
  .sidebar .widget {
      margin-bottom:20px}
  
  .sidebar .widget-container {
      font-size:13px;
      padding:20px;
      margin-bottom:30px;}
  
  .sidebar .box .widget-container {
      padding:0}
  
  .sidebar .widget-container ul {
      margin:0;}
  
  .sidebar .widget-container ul li ul{
      margin:0 0 0 5px;}
  </code></pre>