Always bottom footer


Always bottom footer sample with pure CSS

HTML & CSS code:

<html>
    <head>
        <title>Always bottom footer with pure CSS sample</title>
        <style media="screen">
            html, body {
                position: relative;
                margin: 0;
                padding: 0;
                min-height: 100%;
                *height: 100%;
                color:# 999;
                line-height: 20px;
                background: #ebebeb;
            }
            #header, #content, #footer {
                padding: 20px 0;
                color: #ebebeb;
                background: #999;
            }
            #content { 
                margin: 20px 0 60px; 
                min-height: 300px;
            }
            #footer {
                position:absolute;
                bottom:0;
                width:100%;
                height:20px;
            }
        </style> 
    </head>
    <body>
        <div id="header">HEADER</div>
        <div id="content">CONTENT</div>
        <div title="end of the content : stop line of footer"> </div>
        <div id="footer">FOOTER</div>
    </body>
</html>
Published by goker on in , and edited on .