Position content after absolute positioned divs

Question

I have a relative positioned div which contains another three absolute positioned divs which I use as a slider. Each of the three absolute positioned divs contains an image with width:100%.

The problem is that when I want to position content under my slider, the content overlaps with the slider (because the divs are absolute postioned and I don't know the actual height - it varies because the image width is 100%).

How can I position content under the slider?

Currently I am using a javascript function that retrieves the image's height and adds that height as a padding to the content underneath, but I'd prefer to use pure css.

Is it possible? (I would prefer NOT to use media queries for this, because there would be a looot of resolutions to take care of).

Here goes the code: (for a live example check this fiddle: https://jsfiddle.net/g6ppqxLf/5/)

HTML:

<div id="slideshow" class="latime_100">

        <img src="poze/sageata_st.png" class="navigare" id="navigare_st" onclick="go_prev();"></img>

        <div id="slider_1" class="slider" >

            <img src="http://www.freestockphotos.name/wallpaper-original/wallpapers/download-images-of-gentle-dogs-6866.jpg"></img>



        </div>

        <div id="slider_2" class="slider">

            <img src="http://3.bp.blogspot.com/-rZmCIp0C-hQ/Tx6aCFeweoI/AAAAAAAAAnQ/WqIEVBTIzRk/s1600/Cool-Tiger-Wallpaper-1920x1080-HD.jpg"></img>



        </div>

        <div id="slider_3" class="slider">

            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwazmPOPcUTK1AmVSPQjH7YLlBywxTpkQi4LEQ40HJOg6_8Qyw"></img>



        </div>

        <img src="poze/sageata_dr.png" class="navigare" id="navigare_dr" onclick="go_next();"></img>
    </div>

CSS (navigare_st and navigare_dr are the slider arrows):

.slider{

    width:100%;
    position:absolute;
}

.slider img{

  display: block;
  margin: 0 auto;
  width:100%;

  min-width: 1024px;

}

#slideshow{


    position: relative;
    background-color: white;
    z-index:100;
}

#navigare_st{

    position: absolute;
    z-index:1000;
    left:0px;
    top:45%;
    cursor: pointer;
    width:2.5%;
}

#navigare_dr {
  z-index: 1000;
  position: absolute;
  right: 0px;
  top: 45%;
  cursor: pointer;
  width:2.5%;
}

Answer 1

If you just want to stick with pure css solution, just give your first slider element to position:relative.

Answer 2

I don't fully understand what the problem is.
But here is my attempt at adding extra content to the bottom of the pictures, without overlap.

(ignore the javascript its just for demo)

var curslide = 0;
var elements;

$(document).ready(function() {
  elements = $('.slider');
  elements.hide();
  elements.first().show();

  $('#navigare_st').click(function() {
    if (curslide > 0) {
      curslide--;
      elements.hide();
      elements.eq(curslide).show();
    }
  });
  $('#navigare_dr').click(function() {
    if (curslide < elements.length) {
      curslide++;
      elements.hide();
      elements.eq(curslide).show();
    }
  });
});

.slider {
  width: 100%;
  //position: absolute;
}
.slider img {
  display: block;
  margin: 0 auto;
  width: 100%;
  min-width: 100px;
}
#slideshow {
  position: relative;
  background-color: white;
  z-index: 100;
}
#navigare_st {
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: 1000;
  left: 0px;
  top: 45%;
  cursor: pointer;
  border-radius: 50%;
  background-color: white;
}
#navigare_dr {
  z-index: 1000;
  width: 50px;
  height: 50px;
  position: absolute;
  transform: rotate(180deg);
  right: 0px;
  top: 45%;
  cursor: pointer;
  border-radius: 50%;
  background-color: white;
}
.extra {
  width: 100%;
  height: 50px;
  top: 100%;
  background-color: firebrick;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  line-height: 24px;
  text-indent: 5px;
  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow" class="latime_100">

  <img src="https://cdn4.iconfinder.com/data/icons/miu/22/circle_back_arrow-128.png" class="navigare" id="navigare_st" />

  <div id="slider_1" class="slider">

    <img src="http://lorempixel.com/400/200/" />



  </div>

  <div id="slider_2" class="slider">

    <img src="http://lorempixel.com/400/200/sports" />



  </div>

  <div id="slider_3" class="slider">

    <img src="http://lorempixel.com/400/200/food" />

  </div>

  <img src="https://cdn4.iconfinder.com/data/icons/miu/22/circle_back_arrow-128.png" class="navigare" id="navigare_dr" />

  <div class="extra">
    Here comes the extra content?
  </div>
</div>

Answer 3

Making an element on a page have a dynamic height is not a good practice. Either try to get your images the same height, or give the slideshow container the height of the 'heightest' image.

Typically, slideshows with fade effect use the float: left; for the slides, then a clear:both after the last slide.

But if you insist on keeping that configuration and just want a quick fix, this code will do the trick :

$('#slideshow').css('height', $('#slider_'+i+' img').height());

Copy it inside your slider_init and go_slide functions.

Cordially

Answer 4

You should not be using position: absolute for this task. Why? Because using position: absolute removes elements from the document flow, so browsers will think they take up no space on the page.
Instead, use float:left or float:right. It will accomplish the same task, but will cause the parent div to grow to fit the content.

Like so:

.slider {
    width:100%;
    float: left;
}

I have an updated version of your jfiddle that shows it in action: https://jsfiddle.net/udfjm089/3/

To be frank with you though, unless it is essentially necessary to your layout, I wouldn't recommend this. Setting a fixed height for a wrapper div with overflow: hidden would look much nicer, and not cause your page content to bounce around.