Question

The site is here:

http://www.cottonbrewing.com/members

It’s fine if the content doesn’t require the page the scroll.

CSS:

#footer {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    margin: 0 auto;
    font-size: 12px;
    font-weight: normal;
    clear:both;
    padding: 10px 0px 10px 0px;
    text-align: center;
}

Edit 1: I must also make sure the footer is at the absolute bottom if the content is small, such as you see here: http://www.cottonbrewing.com/ that the footer is at the bottom.

Answer 1

Change position:absolute; to position:relative;

ADDITION

In response to the comment, follow these guidelines for a “sticky footer”:

Body

body
{
  height:100%;
}

Your container div:

#container
{
  min-height: 100%;
  position: relative;
}

Your footer div:

#footer
{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px; /* can be changed, along with padding */
}