title: how to force div to sit below two other divs not in between?
body: <p>i feel really dumb for not being able to figure this out despite this being previously asked here. but can anyone explain why i cannot get the slider div to sit directly below the images + map and text content divs (these two should be on top, one to the left and one to the right)? clearly how im using absolute positioning is incorrect. any advice would be awesome. thx.</p>
  
  <pre><code>&lt;style&gt; 
  
  #container .container_body .images {
      float: left;
  }
  
  #container .container_body .content {
      float: right;
      width: 355px;
  }
  
  #container .container_body {
      margin-bottom: 35px;
      background-color: pink;
      font-size: 22px;
  }
  
  .slider-container { 
      background-color: red;
      /*position: absolute;*/
  }
  
  .content {
      background-color: blue;
  }
  
  .images {
      background-color: green;
      /*position: absolute;*/
  }
  
  &lt;/style&gt; &lt;!-- /.style --&gt;
  
  
  &lt;!-- container ALL --&gt;
  &lt;div id="container"&gt;
  
    &lt;!-- container BODY --&gt;
    &lt;div class="container_body"&gt;
      &lt;p&gt;container body here.&lt;/p&gt;
  
      &lt;!-- IMAGES --&gt;
      &lt;div class="images"&gt;
          &lt;p&gt;images here.&lt;/p&gt;
      &lt;/div&gt; &lt;!-- /.images --&gt;
  
      &lt;!-- TEXT CONTENT --&gt;
      &lt;div class="content" style="width: 366px;"&gt;
            &lt;p&gt;text content here.&lt;/p&gt;
  
            &lt;!-- map --&gt;
          &lt;div class="map"&gt;
              &lt;p&gt;map media here.&lt;/p&gt;
          &lt;/div&gt;&lt;!-- /.map --&gt;
  
      &lt;/div&gt;&lt;!-- /.content --&gt;
    &lt;/div&gt; &lt;!-- /.container_body --&gt;
  
    &lt;div class="slider-container"&gt;&lt;!-- slider --&gt;
       &lt;p&gt;slider here.&lt;/p&gt;
    &lt;/div&gt;&lt;!-- /.slider --&gt;
  
  &lt;/div&gt;&lt;!-- /#container --&gt;
  </code></pre>