title: Overlapping divs
body: <p>I require 2 overlapping divs, which look like the one below.</p>
  <pre><code>    ------------------------------------
     |                      |             |
     |   ------------------ |             |
     |  '                  '|             |
     |  '                  '|             |
     |  '                  '|             |
     |  '                  '|             |
     |  '                  '|             |
     |  '                  '|             |
     |  '                  '|             |
     |  --------------------|             |
     |  '                  '|             |
     |  '                  '|             |
     |   -------------------|             |
     |                      |             |
     |                      |             |
      ------------------------------------
  </code></pre>
  <p>But somehow  am unable to get it. <a href="http://jsfiddle.net/5WTmh/" rel="noreferrer">here is the place am fiddling out</a>
  Can anyone tell me where am I going wrong.</p>
  <p><strong>Edit 1:</strong>
  I have a left div and a right div. The left div has the overlapping div. Right div is a normal div. I guess most of you are confused and thing the right div to be the overlapping one, there are 2 divs in the left div i need those to overlap.</p>
  <p>Sorry to confuse you all.</p>