title: slideToggle not pushing div beneath, just overlapping
body: <p>I am building a website, and ran into a problem with slideToggle. I am using it, to reveal some tags under a question, which is not neccessary to be shown all the time. But the div which has this slideToggle is a top div of a vertical list, and somehow when i toggle it out, it is not pusing the div below further in direction to the bottom of the page. I tried to clear the divs to prevent anything which could block the proper way of working of slideToggle, but it is still overlapping.</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.LayoutBlockContainer {
    position:absolute;
    top:80px;
    height:auto;
    width:800px;
    left:220px;
  }
  
  .Answerblock {
    background-color:white;
    border-radius:1px;
    min-height: 200px;
    height:auto;
    width: 800px;
    /*left: 220px;*/
    display:block;
    /*padding: 20px;*/
    /*top: -1000px;*/
    position: relative;
    margin-bottom:20px;
    border-color: #D0D1D5;
    border-bottom:10px;
    display:table;
    padding-bottom:5px; 
  }
  
  .ab1 {
    width:800px;
    height:auto;
    background-color:white;
    position:relative;
    padding-bottom:22px;
    position:relative;
    top:0px; 
  }
  
  .CommentContent {
    font-family:Arial;
    word-break:normal;
    display:inline-block;
    width: 695px;
    height:auto;
    min-height: 100px;
    position:relative;
    left: 65px;
    white-space:normal; 
  }
  
  .Titletext {
    font-family:Arial;
    word-break:normal;
    display:inline-block;
    width: 695px;
    height:auto;
    min-height: 20px;
    position:relative;
    left: 65px;
    white-space:normal;
    font-weight:bold;
    font-size:1.2em;
    padding-bottom:10px;
    padding-top:10px; 
  }
  
  .CommentFooter { 
    clear: both;
    position: relative;
    height: 80px;
    width:100%;
    bottom: -20px;
    padding-bottom:5px; 
  }
  
  .expand {
    width:800px;
    background-color:white;
    left:0px;
    position:absolute;
    display:block;
    top: 50px;
    text-align:center;
    z-index:3;
    margin-bottom:100px; 
  }
  
  .expand div {
    max-width:300px; 
  }
  
  .expand .moretagcontent {
    display: none;
    padding : 5px;
    width:270px;
    max-height:200px;
    background-color:white;
    left: 260px;
    position:relative;
    bottom: 29px;
    z-index:3;
    height:auto; 
  }
  
  .showmore {
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
    font-family: Arial;
    text-align: center;
    bottom: 00px;
    margin: 0 auto;
    position:relative;
    left:380px; 
  }
  
  .showmore {
    position:absolute;
    float:left;
    display:inline-block; 
  }
  
  .expand .moretagcontent {
    display: none;
    padding : 5px;
    width:270px;
    max-height:200px;
    background-color:white;
    left: 260px;
    position:relative;
    bottom: 29px;
    z-index:3;
    height:auto; 
  }
  
  .moretagcontent {
    color:black;
    font-family:Arial;
    font-size:0.8em;
    width: 240px;
    word-wrap: break-word; 
  }
  
  body {
    background-color:lightgrey; 
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>        &lt;div class="LayoutBlockContainer"&gt;
           &lt;div class="Answerblock"&gt;
              &lt;span class="Titletext"&gt; Halp! Not working! &lt;/span&gt;
              &lt;div class="CommentContent"&gt; comment content here &lt;/div&gt;
              &lt;div class="CommentFooter"&gt;
                  &lt;div class="expand"&gt;
                      &lt;div class="moretagcontent"&gt;
                          #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag#tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag#tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag
                      &lt;/div&gt;
                      &lt;div class="showmore"&gt;
                          &lt;span&gt;More&lt;/span&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
              &lt;div class="ab1"&gt;
  
                  &lt;div class="CommentContent"&gt;
                     asdasdasdasdasdasdasdasdasd
                  &lt;/div&gt;
                  &lt;div class="CommentFooter"&gt;                
                  &lt;/div&gt;
              &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  
  
  <p>And here is <a href="http://jsfiddle.net/os3yzxtg/" rel="nofollow">the demo</a></p>
  
  <p>Thank you!</p>