title: Position a Div to appear below another DIV
body: <p>Ive got two DIV elements one of which has absolute position (lower left corner of main DIV). The second DIV is hidden and only displayed by clicking on a link. </p>
  
  <p>I need the second one to appear just below the first one. But since the first div's position is absolute the second one appearing on top of first one.</p>
  
  <p>HTML Code:</p>
  
  <pre><code>    &lt;div class ="main-div"&gt;
        &lt;div class = "wrapper"&gt;
        &lt;div class ="first-div"&gt;
          &lt;a href ="blah"&gt; &lt;span&gt;my link&lt;/span&gt; &lt;/a&gt;
          //this is absolute positioned
        &lt;/div&gt;
       &lt;div class ="second-div"&gt; 
         //this only appears after clicking on a link
         &lt;form&gt;
            &lt;textarea&gt;
            &lt;/textarea&gt;
         &lt;/form&gt;
       &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    div.wrapper {
       width:inherit;
       float:left;
       bottom:6px;
       position:absolute;
       padding: 0 0 0 0;
       overflow: auto;
      }
  
      div.second-div {
          padding-top: 2px  
      }
  
      div.main-div{
          background:{colour} url({image}) no-repeat 0  100%;
      width:557px;
      padding:8px 13px 4px 13px;
      min-height:61px;
      position:relative;
  }
  </code></pre>
  
  <p>Thanks in advance for any help.</p>