title: Absolute Positioning Relative to the Parent
body: <p>My assumption was when using absolute positioning, that it was relative to the parent div. However, this jsfiddle doesn't seem to mesh with that. What I'm attempting to do is have a three row liquid layout with a min-height set on the center row. The top and bottom have a fixed height. Unfortunately, I am coding only for IE7 and don't have the luxury of using min-height in my CSS. When using JQuery, the center does resize, however, the footer does not reposition relative to the parent. Information and jsfiddle below.</p>
  
  <p>Browser: IE7</p>
  
  <p>Styling: CSS</p>
  
  <p>HTML: 4.0 Strict</p>
  
  <p>JQuery: 1.10.1</p>
  
  <p><a href="http://jsfiddle.net/wQAmA/" rel="nofollow">jsfiddle</a></p>
  
  <p>fiddle after adding position:relative and height 100% to wrapper <a href="http://jsfiddle.net/wQAmA/1/" rel="nofollow">jsfiddle</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="top"&gt;&lt;/div&gt;
      &lt;div id="center"&gt;&lt;/div&gt;
      &lt;div id="bottom"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html, body{
      width:100%;
      height:100%;
  }
  #wrapper{
      background-color:blue;
      height:100%;
      width:100%;
      margin:0px;
      padding:0px;
      min-width:700px;
  }
  #top{
      position:absolute;
      top:0px;
      width:100%;
      height:100px;
      min-width:700px;
      background-color:green;
  }
  #center{
      position:absolute;
      top:100px;
      bottom:20px;
      min-width:700px;
      width:100%;
      background-color:yellow;
  }
  #bottom{
      position:absolute;
      bottom:0px;
      min-width:700px;
      width:100%;
      height:20px;
      background-color:purple;
  }
  </code></pre>
  
  <p>JQuery</p>
  
  <pre><code>var resizeTimer = false;
          function doResize() {
              if ($("body").height() == 500) {
                  //do nothing
              }
              else if ($("body").height() &lt; 500) {
                  $("#wrapper").height(500);
                  $("#center").height(380);
  
              }
              else {
                  $("#wrapper").height("auto");
                  $("#center").height("auto");
              }
              resizeTimer = false;
          }
  
          $(window).on("resize", function () {
              if (resizeTimer) {
                  clearTimeout(resizeTimer);
              }
              resizeTimer = setTimeout(doResize, 300);
          });
  </code></pre>