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: 
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/>
Apply the `z-index` property to your footer:

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

```