Sticky footer at the end of the page even if the content is small

Question

I can't get the footer to stick at the bottom of the page. If there is less content, i need it to be displayed without any scroll of course and if there is more content then in the end. I have the following code:

<div id='wrapper'>
        <div id="top_bar">
        </div>
        <div id="top_add">
            <div if="left_logo">LOGO</div>
            <div id="top_add">ADD</div>
        </div>
        <div id="content" style="height:auto;width:100%;">
                    <div style="font-size:25px;width:90%;float:left;height:auto;">ABCD
                    </div>
                    <div style="width:10%;height:auto;float:right;">ADV.
                    </div>
        </div>
</div>
<div id="foot">
        <a href="#">Contact Us</a>
</div>

CSS:

html, body {
    height:100%;
    width:100%;
    margin: 0;
    padding: 0;
}
#wrapper {
    height:100%;
    width:100%;
    min-width:1300px;
    min-height:100%;
}
#top_bar {
    width:100%;
    height:45px;
    min-width:1200px;
}
#top_add {
    margin-left:15px;
    height:14%;
    width:100%;
    min-width:1200px;
    min-height:130px;
}
#left_logo {
    width:215px;
    height:100%;
    float:left;
    min-width:200px;
    padding-left:20px;
}
#right_add {
    width:980px;
    height:100%;
    float:left;
    background-color:#E8E8E8;
    min-width:750px;
}
#foot {
    background-color:#333333;
    width:100%;
    height:250px;
}

What am i doing wrong? When the content size is small, the property defined as max-height:100% takes the whole page and shows is empty and displays the footer in the end which is found after scrolling.

Answer 1

you want to sticky footer right, so you must be used a css position to set it fixed anywhere in the page

for bottom div add this css

#foot{background-color:#333333;position:fixed;bottom:0px;width:100%;}

please visit live demo here http://jsfiddle.net/Zsg8G/

thank you...

EDITED: hello, i found the your problems please now try this code

<div id='wrapper'>
        <div id="top_bar">
        </div>
        <div id="top_add">
            <div if="left_logo">LOGO</div>
            <div id="top_add">ADD</div>
        </div>
        <div id="content" style="">
            <div>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>
                    </div>
                    <div style="width:10%;height:auto;float:right;">ADV.
                    </div>
        </div>
</div>
<div id="push">&nbsp;</div>
<div id="foot">
        <a href="#">Contact Us</a>
</div>

html,body{height:100%;}
#wrapper
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* Negative indent footer by it's height */
}
#push,#footer{height:100px;}

here you must be remove the float: left...

live demo with: more content: http://jsfiddle.net/SCr7b/1/ and with less content: http://jsfiddle.net/HYf7q/

thank you..