Search code examples
footer

footer doesn't show in the bottom of another divs (scroll is enabled)

I have used this css code and my footer doesn't show at the bottom of the page . please help me

div#footer{
width:100%;
color:#fff;
background-color:#333;
text-align:center;
font-family:'B Roya';
position:relative;
clear:both;
}

and my html code:

<div id="footer"> best display in FireFox</div>
Solution

  • Try this

    <html>
<head>
    <style type="text/css">
        * {
            margin: 0;
        }
        html, body {
            height: 100%;
        }
        #wrapper {
            min-height: 100%;
            height: auto !important;
            height: 100%;
            margin: 0 auto -4em;
        }
        #footer{
            height: 4em;
            background: yellow;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <p>Your website content here.</p>
    </div>
    <div id="footer">
        <p>Copyright (c) 2013</p>
    </div>
</body>