how to prevent sticky footer from overlapping above content when zooming in

I have this webpage with a sticky footer, and when zooming in too much, the footer and its content overlaps the above content. How do i prevent that? here is the link:

http://www.hitone101.com/

Solution

Give #footer a style of overflow: hidden;.

Don't use a fixed width for #footercontent!

Especially not an outrageously high value of 1920px!

Remember that your users will be visiting on all kinds of devices, and may not have their browser window(s) maximized.

When users see the horizontal-scrollbar-of-DOOM™ they will flee the site, post haste.

Update for newer page:

It seemed to be a combination of conflicting width and margin settings; I ended up starting with a clean reset.

Try:
HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <title> Hightone - Landing Page </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <meta name="title" content="">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="http://fonts.googleapis.com/css?family=Noble" rel="stylesheet" type= "text/css">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="wrapper">
    <header id="header">&nbsp;</header><!-- #header-->
    <div id="content">
        <div id="logoholderDiv">
            <img src="images/logo.png">
        </div>
        <div id="videoDiv">
            <!--<img id = "xboxImg" src = "images/xbox.png" />-->
            <iframe src="http://www.youtube.com/embed/Ee0bWAwgCRE" allowfullscreen="">
            </iframe>
        </div>
    </div><!-- #content-->
</div><!-- #wrapper -->
<footer id="footer">
    <div id="footercontent">
        <a href="http://www.hitone101.com/index.html">ENTER SITE</a>
    </div>
</footer><!-- #footer -->
</body></html>

CSS:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
:focus {
    outline: 0;
}
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
html {
    height: 100%;
}
header, nav, section, article, aside, footer {
    display: block;
}
body {
  /*  font: 12px/18px Arial, Tahoma, Verdana, sans-serif; */
    height: 100%;
}
a {
    color: blue;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
p {
    margin: 0 0 18px
}
img {
    border: none;
}
input {
    vertical-align: middle;
}
#wrapper {
    width:              auto;
    min-width:          1000px;
    min-height:         100%;
    height:             auto !important;
    height:             100%;
    background:         url( "images/landing_page_bg.png" );
    border:             1px solid blue;
}


/* Header
-----------------------------------------------------------------------------*/
#header {
    height:             1px;
}

/* Middle
-----------------------------------------------------------------------------*/
#content {
    padding:            0 0 343px;
}

/* Footer
-----------------------------------------------------------------------------*/
#footer {
    margin:             -343px auto 0;
    min-width:          1000px;
    height:             343px;
    background:         url( "images/landing_page_footer.png" )no-repeat;
    background-size:    100%;
    background-color:   black;
}

.selfclear:             after {
    content:            ".";
    float:              left;
    display:            block;
    height:             0;
    clear:              both;
    visibility:         hidden;
}
#logoholderDiv {
    width:              150px;
    height:             142px;
    margin-left:        auto;
    margin-right:       auto;
}
#videoDiv {
    width:              650px;
    height:             551px;
    background:         url( "images/videobg.png" ) no-repeat;
    margin-top:         30px;
    margin-left:        auto;
    margin-right:       auto;
}
#videoDiv > iframe {
    width:              650px;
    height:             551px;
    margin-left:        auto;
    margin-right:       auto;
    border:             1px solid red;
}
#footercontent {
    height:             89%;
    background:         url( "images/footer_logo.png" ) 45.9% no-repeat;
    border:             1px solid brown;
    padding-top:        20px;
    margin-left:        auto;
    margin-right:       auto;
    overflow:           hidden;
}
#footercontent > a {
    padding:            0px 0px 0px 0px;
    text-align:         center;
    text-decoration:    none;
    color:              white;
    display:            block;
    font-size:          50px;
    width:              100%;
    margin:             10px auto 0px auto;
    border:             1px solid;
}