title: Full height, variable width images in CSS
body: <p>I have been working on this site for quite a while, but am still having trouble with a couple of things. Here's the layout:</p>
  
  <ul>
  <li>Top navigation bar: 68px tall, full-width, fixed to top.</li>
  <li>Bottom navigation bar: 42px tall, full-width, fixed to bottom.</li>
  <li>Content: full-height images with various widths, floated to the left.</li>
  </ul>
  
  <p>Navigating the content is done by horizontal scrolling only. It's extremely important that the images fill the full height from the bottom of the top nav bar to the top of the bottom nav bar, and are not cropped or obscured in any way. It's also very important that resizing the browser window or rotating a mobile device doesn't break this layout. My current code works perfectly in Chrome and Safari (with one <a href="http://micho.biz/mac-osx-lion-horizontal-scroll-event/" rel="nofollow">caveat</a>), but fails miserably in Firefox and Opera. I haven't tested in IE yet. Here's what I'm doing:</p>
  
  <pre><code>#header {
    width: 100%;
    height: 68px;
  }
  
  #content {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    bottom: 42px;
    z-index: -10;
    width: auto;
    height: auto;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }
  
  #content #frame {
    max-width: 80000px; /* (To ensure that there's enough horizontal space for images) */
  }
  
  #content #frame img {
    height: 100%;
    width: auto;
    float: left;
    margin-right: 5px;
    position: relative;
    z-index: 100;
  }
  
  #footer {
    width: 100%;
    height: 42px;
    position: absolute;
    bottom: 0;
  }
  </code></pre>
  
  <p>So what I'm essentially doing is creating a window within a window, and then scrolling within that window, which is what leads to the <a href="http://micho.biz/mac-osx-lion-horizontal-scroll-event/" rel="nofollow">problem</a> in Safari that I referred to above. Apart from that, this works exactly the way I want in Chrome and Safari. In Firefox and Opera, the images do not scale to the height of the window.</p>
  
  <p>To see the site for yourself, go here: <a href="http://peter-block.com/preface/" rel="nofollow">http://peter-block.com/preface/</a>. The password is "letitrain".</p>
  
  <p>What I am thinking is doing away with the "window within a window" all together would be best (simple and fixes the Safari problem), but I can't seem to find a solution that works the way I want across all browsers. Any help would be greatly appreciated.</p>