Prev: How will the Footer div stick to bottom of screen?
Next: how does the footer div element stick to bottom of screen irrespective of screen height and volume of body content?
From: Biranchi Narayan Panda on 17 Feb 2010 01:59
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

 | 
Pages: 1
Prev: How will the Footer div stick to bottom of screen?
Next: how does the footer div element stick to bottom of screen irrespective of screen height and volume of body content?