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

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

Advertisements

A

Alexey Smirnov

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

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

Top