title: 100% width images on horizontal scrolling page
body: <p>I'm trying to make a page for a photo story - it's meant to scroll horizontally, but I also want images to scale to 100% height and auto width (so no cropping). The horizontal scroll and 100%  height/auto width is no problem. But I can't get the images spaced properly - they keep overlapping. See: <a href="http://i.imgur.com/nzOon.jpg" rel="nofollow">http://i.imgur.com/nzOon.jpg</a></p>
  
  <p>Is this possible? Have been working at this for ages and am running out of ideas.</p>
  
  <p>Thanks!</p>
  
  <p>JS:</p>
  
  <pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;
      $(function(){
              $(".image").wrap("&lt;td&gt;");
      });
  &lt;/script&gt;   
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.image {
  position:absolute;
  width:auto;
  height:100%;
  }   
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="page-wrap"&gt;
           &lt;div class="image"&gt;
                &lt;img src="images/Betty-001.jpg" id="image-contents" /&gt;  
           &lt;/div&gt;
  
           &lt;div class="image" style="margin-left:75%;"&gt;
                 &lt;img src="images/Betty-001.jpg" id="image-contents" /&gt;  
           &lt;/div&gt;             
  &lt;/div&gt;
  </code></pre>
  
  <p></p>