CSS Footer wont stick!

Hello People (hopefully some CSS gurus),

I am by no means a HTML/CSS expert but undertook the project of building my Dad a website for his business. Armed with two books and the internet I set about my task.

Everything was going so well unitll I realised that I could'nt fix my footer to the bottom of the page . It always seemed to leave a small gap on a page that wasn't 100% the size of the screen. When the content forced scrolling then the footer would stick.

I am using a purely CSS 3 column layout with a header section, a nav bar underneath, the main content beneath that followed by the footer. Any help/guidance/lessons would be gratefully received. Thanks in advance.

[ February 19, 2008: Message edited by: Bear Bibeault ]

Please read this.

Pare your code down to the minimum that demonstrates the issue and post it here. Please be sure to use UBB code tags (read this for more information).

Ok, point taken.

my style sheet looks like this

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0px none;
 }

html, body{
background-color: black;
color: #FFFFFF;
//font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
 }
 
 #wrapper{
width: 770px;
margin: auto;
border-right: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
position: relative;
 }
 
 #banner{
 width: auto;
height: 100px;
margin: 0 auto;
background-image: url('graphics/banner770.png');
background-repeat: no-repeat
 }
 
 #nav{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
 }
 
 #nav ul{
padding: 3px;
margin-top: 3px;
 }
 
 #nav ul li{
display: inline;
padding: 0;
margin: 0;
 }
 
 #nav a:link, #nav a:visited{
color: #FFFFFF;
background-color: #000000;
text-decoration: none;
margin-left: 10px;
margin-right: 10px;
 }
 
 #nav a:hover {
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
 }
 
 hr {
border: none;
background-color: #FFFFFF;
color: #000000;
height: 1px;
width: 770px;
 }
 
 #about {
margin: 0 auto;
text-align: left;
position: relative;
 }

h1{
 background-color: #666666;
 color: #FFFFFF;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 16px;
 padding: 2px;
 text-decoration: underline;
 margin-bottom: 5px;
 }
 
 #about p{
 /*text-align: left;*/
padding-left: 4px;
paddng-right: 4px;
 }
 
 #about ul{
 list-style-type: disc;
 margin-left: 20px;
 margin-top: 0 auto;
 margin-bottom: 20px;
 text-align: left;
 }
 
  #footer{
height: 100px;
text-align: center;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
 }

I can't see anywhere in your CSS where you're doing anything to affect the normal layout of the footer with the other div's; so yeah, it's not going to stick.

If you want to affect the layout, you'll need to set the positioning properties of the CSS rule applied to the footer.

Change your browser's resolution so it is bigger and you will see that the gap grows even larger. If you want it to take up the full height of the page, you would probably ned to look into using percentages and a little JavaScrpt tweaking.

Eric

.

Hi,

Thanks for the replies everybody. I don't want to use Javascript if I can help it as not everybody will have it enabled or will respond to the warning bar in IE to enable it.

As I said I'm not great at CSS so I dont under stand what I can put in the footer other than position being abolute or relative. If I make it absolute then it sticks the bottom but it shifts over to the bottom left of the screen and I don't seem to be able to get it to line back up in the middle column.

Investigate the bottom CSS property.

bottom you say. Righto, I will give that a google and see what it comes up with.

Thanks

Originally posted by Sam Jackson:
Hi,

Thanks for the replies everybody. I don't want to use Javascript if I can help it as not everybody will have it enabled or will respond to the warning bar in IE to enable it.

Sounds like you are developing on a local file system and not on a server if you are getting that error.

Eric