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

  • Thread starter Thread starter Biranchi Narayan Panda
  • Start date Start date
B

Biranchi Narayan Panda

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
 
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 modificationsof
this example.

Thanks
Click to expand...

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%;
}
 
Back
Top