title: Problem with overlapping divs - CSS
body: <pre><code>html, body {margin: 0px; padding: 0px;}
  
  #pageContainer{ margin: auto; padding: auto;}
  #contentContainer{ margin:150px; width:1100px; height: 100%; overflow: hidden; }
  #leftContainer{ width: 80%; min-height: 800px; background: #009900; float:left;}
  #left1{ margin:80px 0 0 80px; height: 550px; top:0px; z-index:1; background: #000000;}
  #left2{ margin:80px 0 0 80px; height: 500px; top:110px; z-index:2000; background:#99FFFF; }
  #rightContainer{ width: 20%; height: inherit; background: black; float:right;}
  
  / CSS Document */
  </code></pre>
  
  <p>I require 2 overlapping divs, which look like the one below.</p>
  
  <pre><code>    ----------------------
     |                      |
     |   ------------------ |
     |  '                  '|
     |  '                  '|
     |  '                  '|
     |  '                  '|
     |  '                  '|
     |  '                  '|
     |  '                  '|
      ----------------------
        '                  '
        '                  '
         -------------------
  
  
  &lt;div id="pageContainer"&gt;
    &lt;div id="contentContainer"&gt;
      &lt;div id="leftContainer"&gt; Am the left container 
        &lt;div id="left1"&gt; 
            &lt;div id="left2"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="rightContainer"&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is am failing to get the overlap. Where am I going wrong?</p>
  
  <p>Edit 1: topx was a typo, corrected it.</p>