I have a website layout consisting of 4 divs.

```
<div class="global">
<div class="content">
</div>
<div class="top">
</div>
<div class="footer">
</div>
</div>

```

the has the following style applied

```
div.top{
position:fixed;
top:0px;
width:100%;
height:28px;
background-color:rgb(55,55,55);
border-bottom:1px solid black;
}

```

the has the following style applied

```
div.footer{
position:fixed;
float:right;
bottom:0px;
left:87.5%;
border:1px solid:black;
border-bottom:0;
}

```

and the has this

```
div.content{
position:absolute;
bottom:0;
top:28px;
width:100%;
background:transparent;
margin:auto;
padding:0;
}

```

the problem I am having is with the content div, I want it to start directly below the top and continue down the rest of the page, however it goes over the bottom of the page by exactly however many px I set the position of top too. Now as I'm using px for the size of the top, I can't apply a percentile, so what would be the best way of doing this using only css.

The website I need this for is <http://www.andysinventions.info/test/> and the problem can be seen on the tab labelled "Forums"

tl;dr how can I stop my div going over the page boundaries?