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.

http://www.sharonfarber.com/sftest1.html

Thanks very much.  More questions on this website coming throughout the day!  Lots of points to be scored!
Revolution9Asked:
Who is Participating?
 
Kyle HamiltonConnect With a Mentor Data 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

0
 
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!
0
 
selvolCommented:
Yes,,,, i agree w/ above.

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

.content 
    { 
        min-height: 280px; 
    } 

Open in new window


The you style css

Selvol
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.