title: CSS design: keeping relative position but stay on the bottom of a containing div
body: <p>First of all, here is a link: <a href="http://template1.design.sflueckiger.ch/pages/home.php" rel="nofollow">http://template1.design.sflueckiger.ch/pages/home.php</a></p>
  
  <p>I have been trying for hours now, but I can't seem to find a solution.</p>
  
  <p>the structure of the page is as follows:</p>
  
  <p>body</p>
  
  <pre><code> &lt;div: container - streches the window to all sides at 100%&gt;
   &lt;div: wrapper - keeps the content in the middle&gt;
   &lt;div: page - contains the actual content&gt;
   &lt;div: footer-wrapper - this one contains 3 footer-boxes&gt;
  </code></pre>
  
  <p>My problem is that I always want to use 100% height. I managed that fine with the wrapper. The problem now is this:</p>
  
  <p>I want the footer-wrapper to always stay at the bottom (<code>margin:10px</code>) of the wrapper. But, I also need the wrapper to expand when the content gets higher than the screen resolution, without overlapping. Therefore, I need footer-wrapper to be relative. This, however, places it always directly under the page div, instead of the bottom.</p>
  
  <p>Any ideas?</p>
  
  <pre><code>body{
      width: 100%;
      height:100%;
      margin: 0;
      padding: 0;
      background:whitesmoke;
  }
  
  #top-bar{
      background-color: #F0F0F0 ;
      top: 0px ;
      left: 0px;
      height: 40px ;
      position:fixed;
      width: 100%;
      border-bottom: 1px solid black ;
      z-index: 1000; 
      /*Position of content*/
      text-align:center;
      box-shadow:0px 0px 10px 3px #555;
  }
  #container{
      position: absolute;
      text-align: center; 
      width: 100%;
      height: 100%;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
  
  }
  
  #top-bar p{
      margin-top:10px;
  }
  
  #page-wrapper{
      min-height:100%;
      width:982px;
      margin:0 auto;
      border:1px solid #555;
      background:#999;
      box-shadow:0px 0px 10px 3px #555;
      position:relative;
  }
  
  #page{
      width:960px;
      height:300px;
      margin:50px 10px 10px 10px;
      border:1px solid white;
      background:whitesmoke;
  
  }
  
  #page p{
      padding:10px;
  }
  
  #footer-wrapper{
      position:relative;
      bottom:0;
      width:962px;
      height:202px;
      margin:30px 10px 10px 10px !important;  
  }
  
  #footer-wrapper p{
      padding-left:10px;
  }
  #footer-1{
      height:200px;
      width:312px;
      margin:0px 10px 0px 0px;
      float:left;
      background:whitesmoke;
      border:1px solid white;
      border-radius:0px 0px 5px 5px;;
      -webkit-border-radius:0px 0px 5px 5px;
      -moz-border-radius:0px 0px 5px 5px;
  
  }
  #footer-2{
      height:200px;
      width:312px;
      margin:0px 10px 0px 0px;
      float:left;
      background:whitesmoke;
      border:1px solid white;
      border-radius:0px 0px 5px 5px;;
      -webkit-border-radius:0px 0px 5px 5px;
      -moz-border-radius:0px 0px 5px 5px;
  }
  #footer-3{
      height:200px;
      width:312px;
      margin:0px 0px 0px 0px;
      float:left;
      background:whitesmoke;
      border:1px solid white;
      border-radius:0px 0px 5px 5px;;
      -webkit-border-radius:0px 0px 5px 5px;
      -moz-border-radius:0px 0px 5px 5px;
  }
  </code></pre>
  
  <p>Any ideas? Again, the link: <a href="http://template1.design.sflueckiger.ch/pages/home.php" rel="nofollow">http://template1.design.sflueckiger.ch/pages/home.php</a></p>