Get a footer to always be on bottom of page CSS

Question

I need my Footer in my Master page to always apear on the bottom of the page. Right now one content page is to large and the footer over laps the content page. Im using a master page with a header and footer section. IF you need other code let me know. But i think it can be solved with just the CSS below.

CSS for the Footer

 div#Footer
    {
        width: 100%;
        height: 80px;
        padding: 1px;
        -moz-border-radius: 35px;
        border-radius: 35px;
        background-color: Black;
        color: #ffffff;
        position: absolute;
        bottom: 0px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

Css for the page embeded in master page

          #MainComments
    {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    #LeaveComments
    {
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        width: 60%;
    }

Markup for Page that gets embeded into master page

   <div id="MainComments">
    <asp:Image ID="CommentedImage" ImageUrl="~/Pictures/4.jpg" Width="50%" runat="server" />
    <br />
    <br />
    <asp:Label ID="lblCommenter" runat="server" Text="By Josh"></asp:Label><br />
    <asp:TextBox ID="PicComments" Text="Hello" runat="server" Rows="3" Width="50%" TextMode="MultiLine"
        ReadOnly="True"></asp:TextBox>
    <br />
</div>
<div id="LeaveComments">
    Leave Comments:<br />
    <asp:TextBox ID="txtEmail" runat="server" Text="Enter your email."></asp:TextBox><asp:Label
        ID="lblDirections" runat="server" Text="You must have an account to leave commnets."></asp:Label>

    <br />
    <asp:TextBox ID="txtComment" runat="server" Width="50%" Rows="3" 
        TextMode="MultiLine"></asp:TextBox><br />
    <asp:Button ID="Button1" runat="server" Text="Leave Comment" 
        onclick="Button1_Click" />
</div>

Try this: http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page — the_, Dec 22 '11 at 18:39
Why is it absolute? Is the content it is overlapping absolute as well? — Nick Rolando, Dec 22 '11 at 18:39
Try: http://stackoverflow.com/questions/4700810/make-the-footer-stick-at-the-bottom-of-the-page or http://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly or http://stackoverflow.com/questions/5057008/making-a-footer-stick-to-the-bottom-of-the-page or http://stackoverflow.com/questions/2354361/ways-to-stick-footer-to-the-bottom-a-page or http://stackoverflow.com/questions/3063393/how-to-make-the-footer-to-stick-exactly-at-the-bottom-of-the-page — Damon Bauer, Dec 22 '11 at 18:46
@shredder just copy and paste the url, it will be generated correctly. — Damon Bauer, Dec 22 '11 at 18:46
I take it the footer div comes right after the `LeaveComments` div — Nick Rolando, Dec 22 '11 at 19:06
yes it does and over laps it a bit. I want it to move depending on the size of the nested page. — CsharpBeginner, Dec 22 '11 at 19:11
possible duplicate of [CSS sticky footer](http://stackoverflow.com/questions/3906065/css-sticky-footer) — Diodeus - James MacFarlane, Dec 22 '11 at 19:52

score 9 · Accepted Answer · answered Dec 22 '11 at 19:58

9

You must put the footer at the same level as the content container, then add these css lines to your footer element:

position:fixed;
bottom:0;

This is an example with your code http://jsfiddle.net/PPhbX/1/

answered Dec 22 '11 at 19:58

I.G. Pascual

5,818
5
42
58

Get a footer to always be on bottom of page CSS

1 Answers1