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

enter image description here

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!

My first guess is uncleared floats so refer http://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#12871734 or its `position: absolute;` then refer http://stackoverflow.com/questions/20718577/how-css-positions-work-why-absolute-elements-stack-up-on-each-other-instead-of/20718728#20718728 — Mr. Alien, Jul 12 '14 at 12:37
@Mr.Alien: Thanks for the reply. Unclear stuff in which DIV? — PeakGen, Jul 12 '14 at 12:42
I am on phone, so haven't read your code, so provided two answers of mine which are likely a solution to your question — Mr. Alien, Jul 12 '14 at 12:45

score 1 · Accepted Answer · answered Jul 12 '14 at 12:43

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

answered Jul 12 '14 at 12:43

Ofir

1,565
3
23
41

Thanks. It worked. By the way, it should be placed above the `Navigation` section, which means the `block_container3` so it can stay in that cloudy background. Right now, it overlaps the `block_container3`. – PeakGen Jul 12 '14 at 15:02
A word of advice - absolute positioning should be used only when there is no other way as it breaks responsiveness, harder to maintain and according to your target users may not work the same on all environments. – Ofir Jul 12 '14 at 16:30
@Ofir not really... if you know what you're doing... he's friendly :) – T J Jul 12 '14 at 19:41

Unable to move a DIV below another DIV

1 Answers1