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,990
Messages
2,570,211
Members
46,796
Latest member
SteveBreed

Latest Threads

Top