How will the Footer div stick to bottom of screen?

  • Thread starter Biranchi Narayan Panda
  • 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
 
G

Guest

Please ignore these questions. couldn't frame question properly

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

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. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,905
Latest member
Kristy_Poole

Latest Threads

Top