-1

Possible Duplicate:
CSS to make HTML page footer stay at bottom of the page with a minimum height

(link to website: http://www.eastsidespeedway.weebly.com/)

Please use the above link and your browsers developer tools to view the html/css.

I'm trying to get the footer of the page to stay down at the bottom of the page. It may look like it's down now, but that's just because it fits the page. For example if you go to /404.html you'll see that it is a no-header page and that the footer is pretty much halfway up the page! I'm using Weebly to add content, etc, but I used Dreamweaver to build the site. I tried multiple things online, but they seem to make the footer go above the actual content to where you can't see it. I need it to be below the content.

The website layout is like this (example):

<div id="container>
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer-container>
  <div id="footer"></div>
</div>

You can see that the footer is in a separate container. This is because there is a background image that needs to display 100% the width of the page, while the container is 960px wide.

I'm somewhat new to html/css so sorry if you don't quite understand.

Again, if you need any help, please just use the developer tools in your browser. :P

Any comments, suggestions, answers are appreciated.

Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
Ryan Fitzgerald
  • 425
  • 4
  • 9
  • 20
  • I have to vote this down because there are plenty of tutorials and material on how to accomplish this across the web. – Kermit Jan 09 '13 at 01:43
  • Okay? I do believe that I said I went through a bunch of tutorials and they aren't working. Half of them are putting them in the bottom of the page, and the other are a variety of things. I'm new to html/css.. – Ryan Fitzgerald Jan 09 '13 at 02:02
  • No? It's not a duplicate? A completely different thing that what I'm using/doing. – Ryan Fitzgerald Jan 09 '13 at 02:23

2 Answers2

1

EDITED

<div id="wrapper">
  <header></header>
  <div id="main"></div>
  <footer></footer>
</div>

body, html, #wrapper { height: 100%;  } /* Create space for elements to be 100% */
#wrapper { display: table; } /* Create a table-structure */
#wrapper > * { display: table-row; } /* All direct children behave as rows */
#wrapper > header, 
#wrapper > footer { min-height: 100px; } /* These must be at least 100px */
#main { height: 100%; } /* Let the mid section fill up the remaining space */
Chris Visser
  • 1,607
  • 12
  • 24
  • This didn't work either. It's putting the footer at the bottom of my screen, but staying in that location. For example, if I have a page that I need to scroll down with (because there is too much content to display in that amount of space) the footer will stay in that location – Ryan Fitzgerald Jan 09 '13 at 01:55
  • Ah ok well I like to use tables. lemme adjust my answer – Chris Visser Jan 09 '13 at 02:12
  • Done. This is my way of working with fluid layouts that have solid elements in it. The tablestructure allowes you to fill up remaining spaces with fluid elements. In this case the main part pushes the footer down for as far as the 100% wrapperheight allowes – Chris Visser Jan 09 '13 at 02:19
0

Simply add to #footer-container

position:absolute;
bottom:0px;

To put the footer on the bottom of the page.

Vucko
  • 20,555
  • 10
  • 56
  • 107
  • I tried that and it puts the footer in the middle of the page. Here's the code that I'm using to see if there's any mistakes that would cause that. – Ryan Fitzgerald Jan 09 '13 at 01:45
  • `} #footer-container { font-family: Verdana, Geneva, sans-serif; text-align: center; height:auto; margin-right: auto; margin-left: auto; vertical-align: bottom; top: auto; color: #FFF; bottom: 0; position: absolute; background: url(footer_bg.png) no-repeat center bottom; width: 100%; } #footer { height: 90px; width: 960px; text-align: center; margin-right: auto; margin-left: auto; font-family: verdana; color: #fff; } #footer a{ color: #fff; text-decoration: none; } #footer a:hover{ color: #fff; text-decoration: underline; }` – Ryan Fitzgerald Jan 09 '13 at 01:46
  • I put only those 2 lines of code and it worked. [images](http://postimage.org/gallery/4nnudx3s/815f7952/) – Vucko Jan 09 '13 at 01:52
  • Okay. I see. But if you look at image #2, you'll see that the footer is overlapping the content. I want it below the `container` – Ryan Fitzgerald Jan 09 '13 at 02:10
  • @RyanFitzgerald That is because the developer tools are on. If you turn them off, it will go to the bottom (look image #1). – Vucko Jan 09 '13 at 02:12
  • Okay, okay! I'm sorry. Completely loosing my mind here. Hahaa. Okay. It's working now. What I was concerned about was the other pages.. Then I realized that you put the styling on the no-header.html. Okay. It works great. Thanks! – Ryan Fitzgerald Jan 09 '13 at 02:19
  • I personally don't like using position: absolute; because now you will have to use margin-bottom to or relative to solve overlapping problems. Maybe not in this case, but you will stumble upon it in probable future sites – Chris Visser Jan 09 '13 at 02:22