I'm having troubles with the positioning of the elements on my website. My website consist of a big div with `class="main"` 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 `position: absolute` and `top: 80%`. 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 `position: absolute` and `top:#` 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 `position:absolute` of the main and stay right after the main? 

Note: Sorry for my bad English.

### CODE:

HTML
----

```
<div class="main">
  <div class="content">
  <h4> Welcome!</h4>
  </div>
</div>

<div id="FooterRotate"></div>
<footer>
     <div class="social"></div>
</footer>

```

CSS
---

```
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;

}

```