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

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

Similar Threads

how does the footer div element stick to bottom of screen irrespective of screen height and volume o 1
How will the Footer div stick to bottom of screen? 2
problem with master page and firefox 5
Using themed css files requires a header control on the page 5
Maintain div display between pages 2
Browser Div Centering Problem 6
Style Sheet not getting applied to content page 8
Height at 100% Not Working 1

Top