CODEWITHSUNDEEP
htmlcss
Jonathan
Jonathan

Reputation: 15420

Absolute positioned div floats over main content

I am absolutely positioning a footer at the bottom of the browser window, using the following code:

HTML

<html>
    <body>
        <div id="content">
            Content
        </div>
        <div id="footer">
            Footer
        </div>
    </body>
</html>

CSS

#content {
    margin-bottom: 20px;
    background: red;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    background: blue;
}

This works just as intended, however when I make the browser window smaller the footer will eventually cover the main content. What is the most efficient way of preventing this?

Thanks in advance.

Upvotes: 1

Views: 1256

Answers (2)

bookcasey
bookcasey

Reputation: 40443

You need a Sticky Footer.

Demo

Here is another example using pseudo-elements. You may have some issues with old versions of IE, but it allows you to forgo un-semantic elements.

Upvotes: 1

Jon Egeland
Jon Egeland

Reputation: 12613

Try this:

#content {
    padding-bottom: 20px;
    background: red;
}

#footer {
    position:fixed; //Changed to fixed
    bottom:0px;
    width:100%;
    height: 20px;
}

Upvotes: 0

Related Questions