title: Position:absolute with height is not responsive
body: <p>I have a container: Width 950px + 25px padding on left and right site. If the browser windows i under 1000px, the container adjust the width to 94% + 3% padding on both sites.</p>
  
  <p>On the top, there is a Div with 4 images with a slideshow (only one image at the same time). The Div with the slideshow shall have the full width from the whole container (width+padding).</p>
  
  <p>My problem is, that this solution is not responsive. Because of the "position: absolute" I have also a fixed height of 556px. Otherwise the content is under the Slideshow-Div. But if I open the website with my smartphone, the 556px are too high for a mobile screen. Now, I'm not knowing how to solve the responsive problem. I think I need the "position: absolute" to overcome the padding on my Container. What can I do?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#cycler {
    position: relative;
    height: 556px;
  }
  #cycler img {
    position: absolute;
    z-index: 1;
    max-width: 1000px !important;
    margin-top: -33px;
    margin-left: -25px;
  }
  #cycler img.active {
    z-index: 3
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="cycler"&gt;
    &lt;img src="/images/startseite-familie.jpg" style="" class="active"&gt;
    &lt;img src="/images/startseite-familie-mit-kind.jpg" style=""&gt;
    &lt;img src="/images/startseite-alleinerziehende-mutter.jpg" style=""&gt;
    &lt;img src="/images/startseite-geschwister.jpg" style=""&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>