title: Extending whitespace in div to bottom of page
body: <p>I'm working on my website that I need to be screenfilling in height.
  It exists of header-banner-content within a container.</p>
  
  <p>The container itself is within another div (shadowbox) who is a bit wider because there is a fade out/shadow-effect. Therefore shadowbox is 1150px width and container only 1024px.</p>
  
  <p>Maybe it is a better way to suppress the inner div and work width a left and right padding but I find it better to work without the padding.</p>
  
  <p>This is my fiddle:</p>
  
  <p><a href="http://jsfiddle.net/Bartimi/REpTA/" rel="nofollow">http://jsfiddle.net/Bartimi/REpTA/</a></p>
  
  <pre><code>&lt;div id="shadowbox"&gt;
      &lt;div id="container"&gt;
          &lt;div id="header"&gt;
              MENU
          &lt;/div&gt;
          &lt;div id="banner"&gt;
              BANNER
          &lt;/div&gt;
          &lt;div id="content"&gt;
              &lt;div id="left"&gt;
                  content left &lt;br /&gt;&lt;br /&gt;
              &lt;/div&gt;        
              &lt;div id="right"&gt;
                  content right
              &lt;/div&gt;
              &lt;div id="clear"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>How can I make sure the #shadowbox-background goes to the bottom?</strong></p>
  
  <p>CSS:</p>
  
  <pre><code>* {
     margin: 0 auto;
     padding: 0;
     border: 0;
  }
  body {
      background-image: url('http://atrox.no-ip.org:8082/HIJW/images/bg.png');
      background-repeat: repeat;
  }
  #shadowbox {
      width: 1150px;
      min-height: 100%;
      background-image: url('http://atrox.no-ip.org:8082/HIJW/images/shadowbox.png');
      background-repeat: repeat-y;
  }
  #container {
      width: 1024px;
  }
  #header {
     height: 100px;
     background-color: red;
  }
  #banner {
      top: 100px;
      min-width: 1200px;
      height: 150px;
      margin-left: -100%;
      margin-right: -100%;
      background-color: blue;
  }
  #content {
      position: relative;
      width: 1000px;
      padding: 0;
      margin-top: 20px;
  }
  #left {
      float: left;
      width: 625px;
      background-color: green;
  }
  #right {
      float: right;
      width: 350px;
      background-color: green;
  }
  #clear {
      clear: both;
  }
  </code></pre>