CODEWITHSUNDEEP
csshtml
vesperae
vesperae

Reputation: 1291

how to force div to sit below two other divs not in between?

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

Upvotes: 0

Views: 6588

Answers (2)

Anthony Forloney
Anthony Forloney

Reputation: 91776

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.

Upvotes: 5

Arthur Weborg
Arthur Weborg

Reputation: 8580

You have your images div floating left, so all content below in your html that can be displayed to the right is going to be displayed.

Then your next div, content, is floating right. It gets displayed at the same y-position (because the previous div is floating left), but anchored to the right of the screen. So the next div, your slider, goes to the left of your content div, and to the right of your images div because of the way the floats work. So the slider ends up in the middle.

try using the right property and relative positioning with your content div, like so;

#container .container_body .content {
    /*    float: right;*/
    position:relative;
    right: 0px;
    width: 355px;
}

This is not a definite fix(You'll have to add a width to your image div, otherwise I believe it might get covered), but It does force your slider div below like you requested.

Upvotes: 1

Related Questions