title: Make div and child div extend at least the full height of browser window
body: <p>I need to have images that extend along the left and right sides of my main body div (actually for a sort of drop-shadow effect under the div). </p>
  
  <p>This would be simple if it wasn't for the fact that I want this div to be <strong>expandable</strong>, and I need it to work in IE7 and IE8, and I want it to extend to at least the bottom of the page. </p>
  
  <p>I tried using polyfills to get CSS3 magic going but they weren't working either (I tried PIE and some filters without any luck). </p>
  
  <p>I feel like I've tried everything...which brings me here! This is as far as I've gotten via just CSS/html, I feel like I should be able to get it to work but so far no cigar:</p>
  
  <pre><code>&lt;div class="left-image"&gt;
  &lt;div class="right-image"&gt;
  main body text
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>with the following css:</p>
  
  <pre><code>html,body{
      height: 100%
  }
  .left-image{
      background: transparent url('image/url.png') repeat-y top left;
      min-height: 100%; /*this alone works for making outer div extend browser &amp; content height*/
      min-width: 960px;
      max-width: 1280px;
      margin: 0 auto;
  }
  .right-image{
      background:  transparent url('image/url.png') repeat-y top left;
      height: 100%; /*this only makes the div the height of its content*/
  }
  </code></pre>
  
  <p>This results in the .left-image div filling the height of the browser window or the height of the content (whichever is larger), but the .right-image div only fitting the height of the content (so if the content is smaller than the browser window it won't fill it). </p>
  
  <p>Any way around this? Just use jQuery?</p>