A div 'infront' of a div?

I'm trying to code a design I've just made: http://www.richardhedges.co.uk/brlan/design.jpg

I'm pretty much done coding but the only thing I don't know how to do is the footer 开发者_如何学编程overlapping the main content. What I'd like it to do is scroll the content. (Like it is on Facebook messages)

The footer is simply a div with nothing in it:

<div class="footer"></div>

And here's the stylesheet:

div.footer {
    width: 980px;
    height: 114px;
    float: left;
    background-image: url(../images/footer.png);
    background-repeat: no-repeat;
    margin-bottom: 20px;
}

I need to create a new div which I'll include the content in (as shown in the design.JPG) however it must be 'behind' the PNG image in the footer. I've absolutely no idea how I'd do this - My apologies for ignorance.

div#footer {
    position: absolute;
    bottom: 0px;
    z-index: 9001;
}
div#content {
    position: relative;
}

Use absolute positioning and a higher z-index on the footer div than on the ones it'll be in front of.