HTML CSS Footer does something weird when positioning

Question

I am trying to make the footer move with the content. It works, but it does something very weird. When I set the position of the footer to "relative" it moves with the content as it should, but it ruins the background image as seen in the image below. If I set it back to absolute, it will be back to normal but it won't move with the content.

Seems like the bottom div won't float over the other content.

HTML:

<div class="wrapper">
    <!-- Top main div -->
    <img src="css/images/logo2.png" class="over">
    <div unselectable="on" class="top unselectable">
        <ul>
        <li><a href="index.html"><img src="images/home2.png" class="menu" width="218" height="50" ></a></li>
        </ul> 
    </div>

    <!-- Middle main div -->
    <div class="middle">
        <div class="content">
            <p class="big">
            Hello there!
        </div>
    </div>

    <!-- Bottom main div -->
    <div class="bottom">

    </div>
</div>

CSS:

div.wrapper
{
    min-height:100%;
    min-width: 1280px; 
    position:relative; /*most likely the problem. There's a dispute between this and the footer attribute*/
}

div.top
{
    height:100px;
    background-color:grey;
    background-repeat: repeat-x;
    background: url('images/top.png');
}

div.middle
{
    background-color:blue;
    background-repeat: repeat;
    background: url(images/bg_middle.png);
    height: 100%;
    width: 100%;
}

div.content
{
    background: url(images/content.png);
    width: 800px;
    padding: 10px;
    border: 1px solid #373737;
    margin: 0;
    word-wrap: break-word;
    margin-left: auto ;
    margin-right: auto ;
    box-shadow: 2px 2px 2px #000000;
}

div.bottom
{
    height:78px;
    width: 100%;
    background-color:white;
    background-repeat: repeat-x;
    background: url(images/bottom.png);
    position:relative; /* Conflicts with the wrapper. */
    bottom:0;
    left:0;
}

Image with position:absolute

Image with position: relative

Answer 1

How about you use same position: absolute on the footer and padding-bottom on the .content?

div.content {
    padding-bottom: 78px;//height of the footer
}

Answer 2

Just move the div up a bit: top and z-index. Only z-index if it isn't on top.

div.bottom
{
    height:78px;
    width: 100%;
    background-color:white;
    background-repeat: repeat-x;
    background: url(images/bottom.png);
    position:relative;
    bottom:0;
    left:0;
    top:-15px;
    z-index:2;
}