title: 100% resizable divs floating left inside container div
body: <p>Is it possible to have a container div with X child divs, each one 100% resizable in the browser? I know it can be done with a single background, but not with a row of divs...
  This is what I intend to do (slideshow that slides left/right):</p>
  
  <p><img src="https://i.stack.imgur.com/yRhR1.jpg" alt="enter image description here"></p>
  
  <p>The HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="slideshowContent"&gt;
    &lt;div id="slideshowImage_01" class="slideshowImage_container"&gt;&lt;/div&gt;
    &lt;div id="slideshowImage_02" class="slideshowImage_container"&gt;&lt;/div&gt;
    &lt;div id="slideshowImage_03" class="slideshowImage_container"&gt;&lt;/div&gt;
    &lt;div id="slideshowImage_04" class="slideshowImage_container"&gt;&lt;/div&gt;
  &lt;/div&gt; &lt;!-- End of id="slideshowContent" --&gt;
  </code></pre>
  
  <p>... and the CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>#slideshowContainer {
    z-index: 0;
    width: 11520px; height: 1080px;
    position: relative;
  }
  
  .slideshowImage {
    width: 1920px; height: 1080px;
    float: left;
  }
  </code></pre>
  
  <p>Thanx.</p>
  
  <p>Pedro</p>
  
  <p><strong>EDIT 1: I forgot to mention that each individual div contains an image.</strong></p>
  
  <p><strong>EDIT 2: Added my own updated <a href="http://jsfiddle.net/t2xjH/" rel="nofollow noreferrer">FIDDLE</a>.</strong></p>