title: Make a element ignore the effect of position absolute of an other element?
body: <p>I'm having troubles with the positioning of the elements on my website. My website consist of a big div with <code>class="main"</code> and a footer. I want to put my main class with a margin-top of 80%. No mather what i put above this div, i want it to stay in that position. To do this i make it <code>position: absolute</code> and <code>top: 80%</code>. The problem is that by doing this my div ignore the document flow and my footer move to the top of the page. I can solve this by giving it a  <code>position: absolute</code> and <code>top:#</code> but I use the same stylesheet for other pages and then i will have to set a top for each of the sites. Is there any way to let my footer ignore the <code>position:absolute</code> of the main and stay right after the main? </p>
  
  <p>Note: Sorry for my bad English.</p>
  
  <h3>CODE:</h3>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div class="main"&gt;
    &lt;div class="content"&gt;
    &lt;h4&gt; Welcome!&lt;/h4&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="FooterRotate"&gt;&lt;/div&gt;
  &lt;footer&gt;
       &lt;div class="social"&gt;&lt;/div&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>body{ 
      background-color:#3CC;
      overflow-x: hidden;
      padding-bottom: 20px;
      border: 1px solid transparent;
  /*    position: absolute;*/
  }
  /*Main*/
  .main{
      -ms-transform: rotate(-2deg);
      -moz-transform: rotate(-2deg);
      -webkit-transform: rotate(-2deg);
      background-image: url(../Media/backgrouds/Fondo.jpg);
      width: 120%;
  /*    height: 1000px;*/
      top: 90%;
      margin-left: -20px;
      position: absolute;
      z-index: -1;   
  }
  
  
  .content{
      transform: rotate(2deg);
      padding-top: 50px;
      width: 83.3%;
      margin-left: 24px;
  }
  
  #FooterRotate{
      transform: rotate(2deg);
      top: 1500px;
      left: -10px;
      height: 100px;
      width:  120%;
      background-color: #C70039;
      position: absolute;
  /*    clear: both;*/
  }
  
  footer{
      height: 220px;
      background-color: #C70039;
      top: 1550px;
      left: -10px;
      padding-top: 20px;
      width: 110%;
      overflow: hidden;
      position: absolute;
  
  }
  </code></pre>