Unable to move a DIV below another DIV

Question

Please have a look at the below code

HTML

<div class="main"> 
  <!------------------------ start menu bar ------------------------->
 <div id="apDiv1"><img src="images/only_text.gif"></div>
  <!-- end menu_bar --> 

  <!------------------------ start body_container ------------------------->
  <div class="body_container2">
    <!------------------------ start block_left ------------------------->
    <div class="block_left4" >
      <div class="logo_container">
      <div align="left"><img src="images/only_spiral.gif"></div>
      </div>
    </div>
    <!-- end block_left -->
    <!------------------------ start video_container ------------------------->
    <div class="video_container2">
      <!------------------------ start video ------------------------->
      <div class="video1">
        <video id="example_video_1" class="video-js vjs-default-skin" width="550" height="300" data-setup="{}" poster="http://video-js.zencoder.com/oceans-clip.png" preload="none" controls>
          <source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4"></source>
          <source type="video/webm" src="http://video-js.zencoder.com/oceans-clip.webm"></source>
          <source type="video/ogg" src="http://video-js.zencoder.com/oceans-clip.ogv"></source>
          <track label="English" srclang="en" src="demo.captions.vtt" kind="captions"></track>
          <!--Tracks need an ending tag thanks to IE9 -->
          <track label="English" srclang="en" src="demo.captions.vtt" kind="subtitles"></track>
          <!--Tracks need an ending tag thanks to IE9 -->
        </video>
      </div>
      <!-- end video -->
      <!------------------------ start div_bottom_video ------------------------->
      <div class="div_bottom_video"> <a href=""><span  id="last2">Menu</span></a> <a href=""><span>Sound</span></a> <a href=""><span>Mail</span></a></div>
      <!-- end div_bottom_video -->
    </div>
    <!-- end video_container -->
    <!------------------------ start presentation_container ------------------------->
    <div class="presentation_container">This is presentation container</div>
    <!-- end presentation_container -->
    <!------------------------ start block_container ------------------------->
    <div class="block_container3">
      <!------------------------ start block1 ------------------------->
      <div class="block1_1">
        <h3>Navigation</h3>
        <ul>
          //CODE REMOVED
        </ul>
        <hr align="center" width="100%" color="#CCCCCC"/>
        <ul>
        <a href="">          </a><a href="">            </a>
        </ul>
      </div>
      <!-- end block1 -->
      <!------------------------ start block2 ------------------------->
      <div class="block2_1">
         <div class="presentation_container">
      <embed  width="590" height="auto" src="test.swf" >
      </embed >
    </div>
      </div>
      <!-- end block2 -->
    </div>
    <!-- end block_container -->
  </div>
  <!-- end body_container --> 
  <!------------------------ start footer ------------------------->
  <div class="footer">
    <div id='cssmenu2'>
      <ul>
       //CODE REMOVED
      </ul>
    </div>
    <p><span id="format">EEE</span> @ 2008 <a href="">privacy policy</a></p>
  </div>
  <!-- end footer --> 
</div>

CSS

@charset "utf-8";
/* CSS Document */
/* styles on index.html */
h3 {
    color: #609;
}
.main {
    margin-left: auto;
    margin-right: auto;
    height: auto;
    overflow: auto;
    width: 1000px;
    background-image: url(../images/background6.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.body_container2 {
    margin-left: auto;
    margin-right: auto;
    padding: 00px 20px 0px 20px;
    width: 960px;
    height: auto;
    overflow: auto;
    position:relative;
}


/*******************************/

.block_left4 {

    float: left;
    width: 250px;
    padding: 10px 10px 0px 10px;
    height: auto;
    overflow: auto;
    text-align: center;

}
.logo_container {
    height: auto;
    width: auto;
    overflow: auto;
}
/*******************************/

.video_container2 {
    margin-top: 70px;
    width: 550px;   
    height: 350px;
    padding: 20px;
    position:absolute;
    background-color: #FFF;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    -webkit-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
    left: 300px;
    top: 160px;
    overflow:hidden;
}



.video1 {
    width: 550px;
    height: 300px;
    border: solid thin #999;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    text-align: center;
    background-color: #666;
}
.example_video_1 {
    position: absolute;
    z-index: -1;
}
.div_bottom_video {
    width: 100%;
    height: auto;
}
.div_bottom_video span {
    float: right;
    font-family: 'Lato', sans-serif;
    padding-right: 15px;
    padding-left: 15px;
    margin-top: 15px;
    border-right: #CCC thin solid;
    color: #609;
}

/*******************************/
.presentation_container {
    float: right;
    width: 590px;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: auto;
    height: auto;
}


/*******************************/

.block_container3 {
    background-color: #666;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    float: right;
    clear:both;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    height: auto;
    background-color: #FFF;
    overflow: auto;
    -webkit-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);

}

.block_container4 {
    background-color: #666;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    float: right;
    clear:both;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    height: auto;
    background-color: #FFF;
    overflow: auto;
    -webkit-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);

}


.block1 {
    float: right;
    width: 235px;
    padding: 20px;
    overflow: auto;
    height: auto;
    background-color: #FFF;
    clear: both;
    font-family: 'Lato', sans-serif;
}

.block1_1 {
    float: right;
    width: 40%;
    padding: 20px;
    overflow: auto;
    height: auto;
    background-color: #FFF;
    clear: both;
    font-family: 'Lato', sans-serif;
}

.block2 {
    float: right;
    width: 235px;
    padding: 20px;
    overflow: auto;
    height: auto;
    background-color: #FFF;
    font-family: 'Lato', sans-serif;

}

.block2_1 {
    float:left;
    width: 50%;
    padding: 20px;
    overflow: auto;
    height: auto;
    background-color: #FFF;
    font-family: 'Lato', sans-serif;

}
.image_box {
    background-image: url(../images/image4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border: solid #333 thin;
    height: 150px;
    width: 100%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
/*******************************/

/*******************************/

This gives the below HTML page

Can you see the text This is presentation container which is also marked in red colour rectangle? Actually that text is inside a DIV and I wanted it to come right below the video, above the Navigation section. This is the HTML code snippet related to that DIV

 <!------------------------ start presentation_container ------------------------->
    <div class="presentation_container">This is presentation container</div>
    <!-- end presentation_container -->

How can I make this happen? I am not a designer, so this became a hard task!

Answer 1

video_container2 div which is the video you see has an absolute position. This means that it does not count for the normal float of objects on the screen. If you want presentation_container to be below it, you can add an absolute position to it too in the css:

.presentation_container {
    position: absolute;
    top: 510px;
    left: 300px;
    width: 590px;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: auto;
    height: auto;
}