title: Absolute div overlapping sibling on resize, css solution or only with Javascript?
body: <p>Trying to fix with css only (if possible) an overlapping absolute positioned div at the bottom of a fixed div in a sidebar.
  Although it would be possible to detect this and modify the position of the absolute div with javascript, I was wondering if there is an easier css only solution.
  I tried to add the padding of the height of the bottom element to the fixed parent, but it keeps overlapping it on resize (vertical)-
  So how to prevent the bottom element to overlap the unordered list in case (1) the window is too small or (2) the list is too long.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="sidebar"&gt;
      &lt;ul&gt;
          &lt;li&gt;list item&lt;/li&gt;
          &lt;li&gt;list item&lt;/li&gt;
          &lt;li&gt;list item&lt;/li&gt;
          ...     
      &lt;/ul&gt;
      &lt;div id="bottom_element"&gt;
          &lt;p&gt;I am a bottom element&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css: </p>
  
  <pre><code>#sidebar {
      position: fixed;
      right: 0;
      top: 0;
      height: 100%;
      width: 200px;
      background: #ddd;
      padding: 1em;
      padding-bottom: 100px;
  }
  
  #bottom_element {
      position: absolute;
      bottom:0;
      left: 0;
      width: 100%;
      background: #000;
      color: #fff;
      padding: 1em;
  }
  
  #sidebar &gt; ul {
      height: 100%;
      overflow-y: auto;
      padding-bottom: 1em;
  }
  </code></pre>
  
  <p>An example of the code: <a href="http://jsfiddle.net/ax9ssstj/" rel="nofollow">jsfiddle</a>.
  Updated code with jquery: <a href="http://jsfiddle.net/ax9ssstj/1/" rel="nofollow">fiddle</a>
  Thank you very much for any help.</p>