Make footer get pushed off page by content but stay at bottom when not full page content

Question

i have a footer that i want to stay at the bottom of the page at all times but when eg the content fills the page the footer does not move down it just hovers over the text. The issue is that the content only starts to scroll on small windows and low res monitors. So i need the footer to stay at the bottom of a page with non filled content but then be pushed out the way by the content when the window is small

PICTURE: http://imgur.com/oS7HBUc - Footer hovers over the content instead of being pushed down, but the scroll bars appear and the footer stays there when i scroll

Here is my CSS:

`
html, body {
        margin:0;
        padding:0;
}

#container {
}

#spacer {
        height: 10px;
        background-color: #24246B;
}

@font-face {
        font-family: palatino;
        src: url('font/palatino.ttf');
}

@font-face {
        font-family: footer;
        src: url('font/footer.ttf');
}

.fb_widget {
    float: right;
    margin-right: 10px;
}

#header, #nav, article, section, body, #mail_success {
        font-family: palatino;
}


#header {
    margin-top: 1%;
    text-align: center;


/*  font-size: 60px;
    color: #F2E6FF;
    border: solid #24246B;
    background-color: #24246B;
    width: 25.5%;
    border-right-color: #4610B3;
    border-right-width: 25px;
    border-left-width: 15px;
    margin-top: 2%;
    text-align: right;*/
}


#nav ul {
    margin-top: 2%;
    line-height: 30px;
    font-size: 17px;
    text-align: center;
    background-color: #24246B; 
}

#nav ul li {
    display: inline;
}

#nav ul li a {
    text-decoration: none;
    color: #F2E6FF;
    padding: 7px 2% 6px 2%;
    font-weight: bold;
    border-radius: 20%;

    /* This makes it fade colour*/
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition:. 5s;
    -webkit-transition: .5s;
    transition: .5s;
}

#nav a:hover {
    color: #24246B;
    background-color: #F2E6FF;
    border-radius: 20%;
}

body {
    background-image: url('media/bg.png');
    padding-bottom: 60px;
    height: 100%;
    max-height: 100%;

}

article {
    color: #24246B;
    margin-left: 20%;
    margin-right: 20%;
    font-size: 20px;
    font-weight: bold;
}

section {
    font-weight: normal;
    font-size: 15px;
    text-align: justify;
    padding-left: 2%;
}

form {
    padding-left: 7%;
    font-size: 19px;
}

input {

    height: 25px;
    width: 300px;
    font-size: 14px;

}

.contact_submit {
    width: 110px; 
    margin-right: 50%;
    margin-left: 42%;
}

label {
    text-align: right;
    float: left;
    display: block;
    width: 260px;
    font-weight: bold;
}

label:after {
    content: "..";
    color: transparent;
}

#push {
    height: 4em;
}

footer {
    font-family: footer;
    color: #cccccc;
    font-size: 8px;
    text-transform: uppercase;
    font-style: italic;
    position: absolute;
    bottom: 0px;
    width: 100%;
}

footer p{
    text-align: center;

}

footer:hover {

    /* This makes it transition*/
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition:. 5s;
    -webkit-transition: .5s;
    transition: .5s;
    color: #24246B;
    font-size: 12px;
}

#mail_success {
    text-align: center;
    padding: 7%;
    font-size: 17px;
    font-weight: bold;
}

@media screen and (max-device-width: 640px) {
    #logo {
        display: none;
    }
}'

and the HTML for the footer:

'   </div>
    <p></p>
        <footer>
            <p>&copy;2013 Built by Rob Calcroft</p>
            <p>Designed by Akash Bharadia &amp; Rob Calcroft</p>
        </footer>
    </body>
</html>

'

Answer 1

in your html you have <footer> and css footer{ some-code}

shouldn't this be an id (if onyl used once per page) or class (if used multiple times per page)?

.footer

or

#footer

then

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