div overriding positioning?

Question

Is there any way to prevent the main_wrapper from overlapping the footer? the footer has to maintain and position: absolute so that it stays flushed at the bottom of the browser.

#page_contain {
    min-height: 100%;
    position: relative;
}

#main_wrapper {
    width: 950px;
    height: 800px;
    margin: 0 auto 25px auto;
    position: relative;
    border: 1px solid #000;
}

#footer {
    position:absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    text-align: center;
    font-family: Verdana;
}

html

<div id="page_contain"></div>
<div id="main_wrapper"></div>
<div id="footer">
line 1 <br />
line 2 <br />
line 2 <br />
line 2 <br />
line 2 <br />
line 2 <br />
</div>

Answer 1

#page_contain {
    min-height: 100%;
    position: relative;
}
#main_wrapper {
    width: 950px;
    height: 100%;
    margin: 0 auto 25px auto;
    position: relative;
    border: 1px solid #000;
    padding-bottom:100px;
}
#footer {
    clear:both;
    position:absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    text-align: center;
    font-family: Verdana;
}

Answer 2

A better way to approach this problem is to apply a fixed positioning to the footer so that it is always at the bottom of the screen. Here's your code in jsfiddle:

http://jsfiddle.net/bnryh/

Answer 3

Apply the z-index property to your footer:

#footer{
    [...]
    z-index: 50;
}