How will the Footer div stick to bottom of screen?

Discussion in 'ASP .Net' started by Biranchi Narayan Panda, Feb 17, 2010.

  1. I've used CSS for my website:
    ***



    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <center>
    <div class="container">
    <div class="header">
    . . .
    . . .
    <div class="menubar">
    <asp:ContentPlaceHolder ID="MenuContentPlaceHolder"
    runat="server">
    </asp:ContentPlaceHolder>
    </div>
    </div>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
    . . .
    . . .

    . . .

    <div class="footer">
    <br />
    <br />
    </div>
    </div>
    </center>
    </form>
    </body>
    </html>









    ***
    <style>
    .style1 {. . .}
    .header {. . .}
    .footer
    {
    background-image: url('images/bottomslice.png');
    background-repeat: repeat-x;
    background-position: bottom;
    }
    </style>

    <body >
    <div class=style1>

    <div class=container>
    <div class=header></div>

    body...
    body...
    body...

    <div class=footer></div>
    </div>
    </div>
    </body>
    ***

    I want the footer to stick to the bottom of the screen, irrespective of
    screen size and body contents.

    How can I achieve this? Please help with a small example.


    Thanks
     
    Biranchi Narayan Panda, Feb 17, 2010
    #1
    1. Advertisements

  2. Please ignore these questions. couldn't frame question properly
     
    Biranchi Narayan Panda, Feb 17, 2010
    #2
    1. Advertisements

  3. For example you can set an absolute position to pull the div element
    out of the flow of the document and set it to the bottom

    ..footer
    {
    position: absolute;
    bottom: 0;
    width: 100%;
    }
     
    Alexey Smirnov, Feb 17, 2010
    #3
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.