title: Position content after absolute positioned divs
body: <p>I have a <code>relative</code> positioned div which contains another three <code>absolute</code> positioned divs which I use as a slider. Each of the three <code>absolute</code> positioned divs contains an image with <code>width:100%</code>.</p>
  
  <p>The problem is that when I want to position content <strong>under</strong> my slider, <strong>the content overlaps with the slide</strong>r (because the divs are absolute postioned and I don't know the actual height - it varies because the image width is 100%).</p>
  
  <p>How can I position content under the slider?</p>
  
  <p>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.</p>
  
  <p>Is it possible? (I would prefer <strong>NOT</strong> to use media queries for this, because there would be a looot of resolutions to take care of). </p>
  
  <p>Here goes the code: (for a live example check this fiddle: <a href="https://jsfiddle.net/g6ppqxLf/5/" rel="nofollow">https://jsfiddle.net/g6ppqxLf/5/</a>)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="slideshow" class="latime_100"&gt;
  
          &lt;img src="poze/sageata_st.png" class="navigare" id="navigare_st" onclick="go_prev();"&gt;&lt;/img&gt;
  
          &lt;div id="slider_1" class="slider" &gt;
  
              &lt;img src="http://www.freestockphotos.name/wallpaper-original/wallpapers/download-images-of-gentle-dogs-6866.jpg"&gt;&lt;/img&gt;
  
  
  
          &lt;/div&gt;
  
          &lt;div id="slider_2" class="slider"&gt;
  
              &lt;img src="http://3.bp.blogspot.com/-rZmCIp0C-hQ/Tx6aCFeweoI/AAAAAAAAAnQ/WqIEVBTIzRk/s1600/Cool-Tiger-Wallpaper-1920x1080-HD.jpg"&gt;&lt;/img&gt;
  
  
  
          &lt;/div&gt;
  
          &lt;div id="slider_3" class="slider"&gt;
  
              &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwazmPOPcUTK1AmVSPQjH7YLlBywxTpkQi4LEQ40HJOg6_8Qyw"&gt;&lt;/img&gt;
  
  
  
          &lt;/div&gt;
  
          &lt;img src="poze/sageata_dr.png" class="navigare" id="navigare_dr" onclick="go_next();"&gt;&lt;/img&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS <strong>(navigare_st and navigare_dr are the slider arrows)</strong>:</p>
  
  <pre><code>.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%;
  }
  </code></pre>