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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

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

Post 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;
}
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

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

Post 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.
User avatar
php_east
Forum Contributor
Posts: 453
Joined: Sun Feb 22, 2009 1:31 pm
Location: Far Far East.

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

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

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

Post 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"
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
mintedjo
Forum Contributor
Posts: 153
Joined: Wed Nov 19, 2008 6:23 am

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

Post by mintedjo »

Post Reply