Question

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.

<style> 

#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;*/
}

</style> <!-- /.style -->


<!-- container ALL -->
<div id="container">

  <!-- container BODY -->
  <div class="container_body">
    <p>container body here.</p>

    <!-- IMAGES -->
    <div class="images">
        <p>images here.</p>
    </div> <!-- /.images -->

    <!-- TEXT CONTENT -->
    <div class="content" style="width: 366px;">
          <p>text content here.</p>

          <!-- map -->
        <div class="map">
            <p>map media here.</p>
        </div><!-- /.map -->

    </div><!-- /.content -->
  </div> <!-- /.container_body -->

  <div class="slider-container"><!-- slider -->
     <p>slider here.</p>
  </div><!-- /.slider -->

</div><!-- /#container -->

Answer 1

When you have elements which are floating, you must apply a clear property to elements which you want to sit under the floating elements. Such as,

.slider-container {
   clear:both;
}

The value of both just denotes to move the element down to clear both floating left and right elements. In your example above this should cover both float:left; and float:right; declarations.

By applying the above style to your existing markup, the slider sits under the images and text as intended. Here is a copy of my jsfiddle.