Page 1 of 1

CSS Problem, footer needs to stick at the bottom of the page

Posted: Tue Mar 03, 2009 3:18 pm
by Sindarin
I am trying to get #footer2 div to stick to the bottom of the page but it doesn't work.

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>
and here is the stylesheet:

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

Re: CSS Problem, footer needs to stick at the bottom of the page

Posted: Tue Mar 03, 2009 9:20 pm
by JAB Creations

Code: Select all

#footer{ bottom: 0px; height: 80px; left: 0px; position: absolute; right: 0px; width: 100%;/* do not define top position!*/}
If you need padding on the #footer add margin to the child elements instead. You don't need to set the width property for modern browsers as 1.) block elements by default have 100% width and 2.) setting both left and right positioning to 0px will also make the div element have 100% width.

Re: CSS Problem, footer needs to stick at the bottom of the page

Posted: Tue Mar 03, 2009 11:30 pm
by php_east
Sindarin wrote:I am trying to get #footer2 div to stick to the bottom of the page but it doesn't work.
in what way does it not work ?
u could try clear:left; or clear:both; in footer2.

Re: CSS Problem, footer needs to stick at the bottom of the page

Posted: Wed Mar 04, 2009 10:42 am
by pickle
I assume it needs to stick at the bottom of the page or below the content, whichever is further down?

Do a Google search for "footerStickAlt"

Re: CSS Problem, footer needs to stick at the bottom of the page

Posted: Wed Mar 04, 2009 10:47 am
by mintedjo