HTML CSS - sticky footer

Question

I have a problem with my footer. I tried to use this solution http://ryanfait.com/sticky-footer/. At first it worked fine, but now it doesn't.

I am trying to use this footer solution on my website.

When I use line with:

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

The link to the website is too long: https://jsfiddle.net/yptaufab/

When I erase this div, problem occurs when I zoom in - footer goes to side at one moment: https://jsfiddle.net/w03ca8b3/

After zooming, it seems like the footer is aligned beside the div id="centerinfoleft" and I don't know why. I feel like I tried everything. I would be very grateful for any help.

Answer 1

The .push element needs to go in the .wrapper element.

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

.line
 {
 display:block;
 border-bottom:1px solid #1a1aff;
 padding:2x;
 text-align: center;
 font-family: Verdana;
 font-size: 10pt;
 font-weight: normal;
 color: #1a1aff;
 }

t5
 {
 font-family: Verdana;
 font-size: 10pt;
 font-weight: normal;
 display: block;
  text-decoration-color:black;
 }

t5:link, t5:visited 
 {
    color: black;
    text-decoration-color: black;
 }

<div id="main" class="wrapper"
            style=" margin-left:auto;
                    margin-right: auto;
                    width: 100%">
    <div id="head"
                style=" background-color: #1a1aff;
                        height: 100px;
                        width: 100%">
        <div id="insidehead"
                style=" margin-left: auto;
                        margin-right: auto;
                        height: 100px;
                        width: 1000px">

             <div id="login"
                style=" float:right;
                        background-color: #1a1aff;
                        height: 100px;
                        width: 200px">
            </div id="login">
        </div id="insidehead">
    </div id="head">

    <div id="centerinfo" style=" 
                        margin-left: auto;
                        margin-right: auto;
                        height: 300px;
                        width: 1100px">

        <div id="centerinfoleft" style=" 
                        margin-left: auto;
                        margin-right: auto;
                        height: 300px;
                        width: 550px;
                        float:left;"><br>

                        <span class="line">What is going on?</span><br>

                        <t5>asdf<br>
                        asdf</t5><br>

                        <span class="line">Rules</span><br>

                        <t5>asdf<br>
                        asdf<br>
                        asdf<br>
                        asdf<br>
                        asdf<br>
                        asdf</t5><br>

        </div id="centerinfoleft">
    </div id="centerinfo">
  <div class="push"></div>
</div id="main" >


        <div id="footer" class="footer"
            style=" margin-left:auto;
                    margin-right: auto;
                    background: #1a1aff;
                    text-align:center;
                    width: 100%">
            
            <t2 style="color:white; font-weight: normal;">
            <a href="index.php" style="color:inherit;text-decoration: none;position:relative;top:10px">index</a> &nbsp;&nbsp; <c style="color:inherit;text-decoration: none;position:relative;top:10px">l<c> &nbsp;&nbsp; 
            <a href="index.php" style="color:inherit;text-decoration: none">index</a> &nbsp;&nbsp; l &nbsp;&nbsp; 
            <a href="index.php" style="color:inherit;text-decoration: none;">index</a></t2>

        </div id="footer">