• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 601
  • Last Modified:

footer position wrong - HTML5 page

Help!  I'm putting together a website in HTML5 - my footer is not at the very bottom of the container, and I can't figure out why.  Please let me know what I did wrong.


Thanks very much.  More questions on this website coming throughout the day!  Lots of points to be scored!
1 Solution
Kyle HamiltonData ScientistCommented:
give container position relative, and footer position absolute, then bottom:0

.container {
width: 960px;
background: white;
-moz-box-shadow: 0px 0px 40px #000000;
-webkit-box-shadow: 0px 0px 40px black;
box-shadow: 0px 0px 40px black;
margin-top: 50px;
height: 500px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
position: relative;

footer {
padding: 10px 0;
background: #CCC49F;
position: absolute;
bottom: 0;

Open in new window

Revolution9Author Commented:
I had to manually stretch the footer area to make it the same width as the container, it fell a bit short.  Thanks so much for your help!
Yes,,,, i agree w/ above.

Depending on the needs of the page.
you could also add

        min-height: 280px; 

Open in new window

The you style css


Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now