Sticky Footer CSS

I have a pretty basic site (header,content,footer no sidebars or anything) the problem is the content area is overlapping the footer. I have tried all the sticky footer fixes (i.e csstricks, ryanfait.com and a few others I found on google and some on here and none of them work

As usual any help is appreciated

    <body>
     <div class="wrapper">


            <div id="header">
            </div>

            <div id="content">      
            </div>

            <div id="push">
            </div>

     </div>

     <div id="footer">
     </div>

</body>



    * {
margin: 0;
}

html, body {
height: 100%;
}



#header{
    background-image:url("Images/nav.jpg");
    width:100%;
    height:64px;
}

#content{
    background:#ffffff;
    height:592px;
    width:798px;
    position:absolute;
    top:80px;
    left:20%;
    z-index:3;
    -moz-box-shadow: 0px 0px 8px #000000; /* FF3.5+ */
    -webkit-box-shadow: 0px 0px 8px #000000; /* Saf3.0+, Chrome */
    box-shadow: 0px 0px 8px #000000; /* Opera 10.5, IE9, Chrome 10+ */
}

#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -129px;
}

#footer, #push {
height: 129px;
}

#footer{
    background-color:#292929;
    width:100%;
}

Solution

Why is your content absolutely positioned? It does not seem to be needed and will cause the issues you are experiencing. Remove that and make the footer:

#footer {
 position: fixed;
 bottom: 0;
 height: 80px; 
}

http://jsfiddle.net/JyQxW/