title: Adding an Overlay Div
body: <p>I'm creating a full-screen design where:</p>
  
  <ul>
  <li>Top % Bottom bars are a specific height, but 100% width</li>
  <li>Middle Left Bar is specific width but 100% height</li>
  <li>Middle right bar takes up space of whatever is left</li>
  </ul>
  
  <p>I'm trying to create an "options" div that would pop up from the bottom right bar, overlaying my map on the middle-right side.</p>
  
  <p><img src="https://i.stack.imgur.com/LdhbD.jpg" alt="enter image description here"></p>
  
  <p>However, by looking at my <a href="http://jsfiddle.net/ABz3A/" rel="nofollow noreferrer">code</a>, you can see that what I did makes the options div start at the bottom div and goes downward. Furthermore, I gave it a 100% width, but it did not adapt the width of its container, but the width of the screen.</p>
  
  <pre><code>#options {
      position: absolute;
      background: #39E023;
      width: 100%;
      height: 200px;
      text-align: right;
  }
  </code></pre>
  
  <p>Thanks guys!</p>