title: CSS relative positioning with negative value and height
body: <p>I'm trying to negative position a DIV element (in the example is #content), but my problem is the div's container (#wrapper2), gets too much height (actually is the height the #content is giving, but as I'm moving the content up, I would like to decrease the height of #wrapper2 accordingly). </p>
  
  <p>Here I give you an example to show what I'm trying to achieve. If you try the sample, you'll see that footer stays at too many distance from container. I can make a dirty hack here and make footer top:-200px too but then the scroll bar of the window goes over the footer.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Relative positioning demo&lt;/title&gt;
      &lt;style&gt;
          /* RESET STUFF */
          html {
            margin:0;
            padding:0;
            border:0;
          }
  
          body, div, p, h1 {
            margin: 0;
            padding: 0;
            border: 0;
          }
          /* END RESET */
  
          h1 {
              background-color: yellow;
          }
  
          p {
              margin-bottom: 1em;
          }
  
          /* LAYOUT */
          #wrapper1 {
              text-align: center;
              height: 250px;
              background-color: lightgray;
          }
          #wrapper2 {
              background-color: lightblue;
          }
          #content {
              width: 950px;
              margin: 0 auto;
              background-color: white;
              padding: 5px;
              height: 560px;
  
              /* HERE's my problem */
              position: relative;
              top: -200px;
          }
          #footer {
              background-color: black;
              color: white;
              height: 40px;
              line-height: 40px;
              text-align: center;
          }               
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="wrapper1"&gt;
          &lt;h1&gt;This is my heading&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div id="wrapper2"&gt;
          &lt;div id="content"&gt;
              My content here
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;
          lorem ipsum
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If you have any suggestions, keep in mind that I must see both, the lightgrey and lightblue background (they're images on my site), so margin-top: -200px is not an option (like someone suggested in related questions that I've searched for)</p>
  
  <p>Thanks!</p>