title: Slideshow overlaps footer
body: <p>I'm working on a responsive page, and tried everything (including the search function here) but the footer keeps sliding under the  content/slideshow. What am I doing wrong?</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  &lt;div id="content"&gt;
  
      &lt;div class="slideshow"&gt; 
          &lt;img src="img/1.JPG" width="850" /&gt;
          &lt;img src="img/2.JPG" width="850" /&gt;
          &lt;img src="img/3.JPG" width="850" /&gt;
      &lt;/div&gt; &lt;!-- Ends Slideshow --&gt;
  
  &lt;/div&gt; &lt;!-- Ends Content --&gt;
  
  &lt;div id="footer"&gt;   
  &lt;/div&gt;
  &lt;/div&gt;
  
  Style-sheet:
  
  #wrapper { width: 900px; margin: 0 auto 0 auto; }
  #content { padding: 20px 30px 0 30px; height: auto; }
  .slideshow { position:relative; height:auto; max-width: 100%; margin-bottom: 10px; }
  .slideshow img { max-width:100%; height: auto; }
  #footer { padding: 20px 0 0 0; }
  </code></pre>