slideToggle not pushing div beneath, just overlapping

Question

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.

CSS:

.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; 
}

HTML:

        <div class="LayoutBlockContainer">
         <div class="Answerblock">
            <span class="Titletext"> Halp! Not working! </span>
            <div class="CommentContent"> comment content here </div>
            <div class="CommentFooter">
                <div class="expand">
                    <div class="moretagcontent">
                        #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
                    </div>
                    <div class="showmore">
                        <span>More</span>
                    </div>

                </div>
            </div>
        </div>

            <div class="ab1">

                <div class="CommentContent">
                   asdasdasdasdasdasdasdasdasd
                </div>
                <div class="CommentFooter">                
                </div>
            </div>

    </div>

And here is the demo

Thank you!

Answer 1

It's because .expand is position: absolute which causes it to be removed from the flow of the document thus does not register a height/width. Remove that:

.expand {
  width:800px;
  background-color:white;
  /*position:absolute;*/ //remove
  display:block;
  text-align:center;
  margin-bottom:100px; 
}

Positioning elements can be very messy. You should try and do this with margins, padding, floats, inline-blocks, etc. instead of just moving things left, right, top and bottom. It will help you in the long run.

FIDDLE