How will the Footer div stick to bottom of screen? - This is correct question (please ignaore previo

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

  1. I've used CSS for the master page:
    ***
    <head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    </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">
    | . . .
    | . . .
    |</div>

    </div>
    </center>
    </form>
    </body>
    </html>

    *****
    Stylesheet:
    __________
    body
    {
    background-image: url('images/bg.png');
    }
    ..container
    {
    background-color: #EFEFEF;
    width: 90%;
    height: 100%;
    }
    ..header
    {
    background-image: url('images/headerslice.png');
    background-repeat: repeat-x;
    text-align: left;
    vertical-align: top;
    }
    ..footer
    {
    background-image: url('images/bottomslice.png');
    background-repeat: repeat-x;
    background-position: bottom;
    }

    ***

    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 or modifications of
    this example.


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

  2. 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
    #2
    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.