title: Css layout - overlapping divs
body: <p>I have a really stuburn layout, that I just can not resolve ..</p>
  
  <pre><code>- Left column - Fixed,Static (always in view)
  - Right column - Fluid/liquid/scrollable
  --- Header - fixed 
  --- left/main fluid/liquid
  --- Right/sidebar - fixed width
  --- footer
  </code></pre>
  
  <p>(if the above is not clear - header,left/main,right/sidebar,footer are INSIDE the right column)</p>
  
  <p>now, this layout sort of working ,</p>
  
  <pre><code>&lt;div id="left-col"&gt;left col&lt;/div&gt;
  
  &lt;div id="container"&gt;
  
      &lt;div id="header"&gt;header&lt;/div&gt;
      &lt;div id="main"&gt;
          &lt;div id="sidebar"&gt;sidebar&lt;/div&gt;
          main
      &lt;/div&gt;
      &lt;div id="footer"&gt;footer&lt;/div&gt;
  &lt;/div&gt;
  
  #left-col {
      width: 50px;
      position: fixed;
      background: yellow;
      left: 0;
      top: 0;
  }
  #container {
      margin-left: 50px;
      background: black;
  }
  #header {
      background: green;
  }
  #main {
      background: blue;
      position: relative;
  }
  #sidebar {
      position: absolute;
      top: 0;
      right: 0;
      width: 50px;
      background: pink;
  }
  #footer {
      background: red;
  }
  </code></pre>
  
  <p>but still I have one annoying problem - 
  when the main content is not long enough - the sidebar and the footer are overlapping ..
  That is because the sidebar is : absolute positioned - but then again, If i make it relative, and the page is being re-sized, the sidebar goes UNDER the main ... (not enough space for fluid ...)
  so , my question is this , 
  Anyone has an Idea how to keep the footer UNDER the sidebar ? (jQuery sticky tricks not working, and CSS tricks are quite tricky here..)
   or any other ides to achieve this layout ?</p>
  
  <p>JSFIDDLE: <a href="http://jsfiddle.net/VNU6Z/" rel="nofollow">http://jsfiddle.net/VNU6Z/</a></p>