How will the Footer div stick to bottom of screen?

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

Biranchi Narayan Panda

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
 
Please ignore these questions. couldn't frame question properly
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