want footer to stay at bottom, but not absolute

Question 1

I was able to keep the footer sticky and not overtake the header by using z-index. Just give the higher DIVs higher z-indexes.

    #headWrapper {
        padding-bottom: 0px;
        position: relative;
    }
    #headWrapper {
        z-index: 2;
    height: 160px;
        /* width: 960px; */
        margin: 0 auto;
        background: url(/images/PageImages/homeHeadBack.png) repeat-x;
    }

    #footerWrapper {
        background: url(/images/PageImages/footerBack.png) repeat-x;
        height: 177px;
        position: absolute;
        width: 100%;
        bottom: 0;
        z-index: 1;
    }

Please note that #headWrapper needs to specify position:relative. I think you may start from this. Worked on Chrome.

Question 2

I'm using this, and it works fine, on mobiles too ...

HTML:

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</body>

CSS:

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
    background:#5ee;
}
#content {
    padding:10px;
    padding-bottom:80px; /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}

source:

http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

demo:

http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/

Question 3

Try this

#footerWrapper{
    position: fixed;
}

#contentWrapper{
    margin-bottom: 177px; // height of the footer
}

Question 4

Alright, I'm not positive but I think I understand what you're trying to accomplish

#footerWrapper {
   background: url(/images/PageImages/footerBack.png) repeat-x;
   height: 177px;
   position: fixed;
   width: 100%;
   bottom: 0px;
}

#contentWrapper {
   background: url(/images/PageImages/contentTopBack.png) no-repeat center top;
   min-height: 208px;
   margin-bottom: 177px;
}

If that doesn't fix it than I don't understand what you're aiming for.

Question 5

try this one.

HTML:

<html>
<head>

    <link rel="stylesheet" href="layout.css" ... />

</head>

<body>

    <div class="wrapper">

        <p>Your website content here.</p>

        <div class="push"></div>

    </div>

    <div class="footer">

        <p>Copyright (c) 2014</p>

    </div>

</body>

</html>

CSS:

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

for more information.