This post works great but while using it on a form I noticed that I need more modifications to it.
The first modification is that I used the form as the container.
The second one is to use a black background for the form to make sure that it stretched to the footer that is positioned on the bottom of the page.
In case of using a form you can use something like the following :
STYLE
html, body {
margin:0;
padding:0;
height:100%;
background-color:#23211d;
font-size: .90em;
font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
}
#container {
width:960px;
}
#headerLogo
{
background-image:url('Images/webnew_header.jpg');
height:141px;
}
#page
{
background-color:Black;
padding-bottom:200px;
}
#footer
{
color:#464541;
background-color:Black;
position:absolute;
bottom:0;
width:960px;
height:200px;
}
Master Page
<body>
<form id="Form1" runat="server" style="min-height: 100%; position: relative; background-color: Black;
width: 960px;margin: 0px auto 0px auto;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<div id="container">
<div id="headerLogo">
</div>
<div id="page">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
<div id="footer">
<table width="100%" cellpadding="0px" cellspacing="0px">
<tr>
<td align="left" valign="bottom">
All rights reserved for <a href="http://www.victorylink.com" target="_blank">Victory
Link</a>
</td>
<td align="right">
<asp:Image ID="imgTower" runat="server" Height="200px" ImageUrl="~/Styles/Images/lower_right_image.png"
ImageAlign="Right" />
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</form>
</body>
