CSS Problem, footer needs to stick at the bottom of the page
Posted: Tue Mar 03, 2009 3:18 pm
I am trying to get #footer2 div to stick to the bottom of the page but it doesn't work.
and here is the stylesheet:
Code: Select all
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
<div id="footer2">footer2</div>
</body>Code: Select all
/*
STYLE
style.css
*/
/* BODY */
body {
background-color: #000000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #3333CC;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #3333CC;
}
a:hover {
text-decoration: underline;
color: #3333CC;
}
a:active {
text-decoration: none;
color: #3333CC;
}
#header
{
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
width:auto;
min-height:150px;
background-color:#666666;
}
#footer
{
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
width:auto;
height:auto;
min-height:100px;
background-color:#444444;
}
#footer2
{
margin-left: 10%;
margin-right: 10%;
margin-bottom: 0px;
margin-top: 0px;
width:auto;
height:auto;
min-height:100px;
min-width:800px;
background-color:#222222;
}
#content
{
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
width:auto;
height:auto;
min-height:300px;
background-color:#333333;
}
#wrapper
{
margin-left: 10%;
margin-right: 10%;
margin-bottom: 0px;
margin-top: 0px;
width:auto;
height:auto;
min-width:800px;
min-height:300px;
background-color:#555555;
}