CSS Floating Footer?

Question

I've been trying to follow this post and this post on the below code with little success. When there is scrolling content in the div above the footer, the footer floats around in the middle of the scrollable content. I'm sure that there is a simpler solution than what I'm trying below:

.container {
  width: 964px;
}

#footer {
  background-color: #000000;
  height: auto;
  margin-top: 0px;
  bottom: 0px;
}
#footer-container {
  background-color: #000000;
}

#footer-container #footer {
  background: url("http://www.me.com/common/commonspot/templates/images/chrome/logos/footer-logo.png") no-repeat scroll 20px 23px #000;
  padding-bottom: 49px;
}
#footer .top {
  border-bottom: 1px solid #7F7F7F;
  margin-left: 82px;
  padding-bottom: 16px;
  padding-top: 33px;
}
#footer .text-logo {
  background: url("http://www.me.com/common/commonspot/templates/images/chrome/logos/text-logo.png") no-repeat croll 0 0 transparent;
  float: left;
  height: 28px;
  width: 176px;
}
#footer .slogan {
  background: url("http://www.me.com/common/commonspot/templates/images/chrome/logos/slogan.png") no-repeat scroll 0 0 transparent;
  float: right;
  height: 12px;
  margin-top: 14px;
  width: 259px;
  background-color: #000000;
}
#footer .links {
  float: left;
  margin-left: 81px;
  margin-top: 13px;
}
#footer .links a {
  color: #fff;
}
#footer .links li {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 13px;
  text-decoration: underline;
}
#footer .social {
  float: right;
  margin-left: 37px;
  margin-right: 5px;
  margin-top: 14px;
}
#footer .social li {
  margin-bottom: 7px;
  text-decoration: underline;
}
#footer .social a {
  color: #FFFFFF;
  font-size: 12px;
  padding-left: 26px;
}
#footer .social .facebook {
  background: url("http://www.me.com/common/commonspot/templates/images/chrome/utils/social_v2.png") no-repeat scroll 0px 4px transparent;
}
#footer .social .twitter {
  background: url("http://www.me.com/common/commonspot/templates/images/chrome/utils/social_v2.png") no-repeat scroll 0px -20px transparent;
}
#footer .social .youtube {
  background: url("http://www.me.com/common/commonspot/templates/images/chrome/utils/social_v2.png") no-repeat scroll 4px -42px transparent;
  padding-left: 15px;
}
#footer .social .itunes {
  background: url("http://www.me.com/common/commonspot/templates/images/chrome/utils/social_v2.png") no-repeat scroll 4px -66px transparent;
  padding-left: 15px;
}
#footer .updated {
  clear: right;
  color: #9B9B9B;
  float: right;
  font-size: 10px;
  margin-top: 14px;
}
#footer-container ul li {
  text-align: left
}

<div id="footer-container" style="margin: 0 auto; width: auto;" align="center" background-color="#000000" ;>
  <div id="footer" class="chrome-center clearfix">
    <div class="top clearfix">
      <a href="http://www.me.com/">
        <div class="text-logo"></div>
      </a>
      <div class="slogan"></div>
    </div>
    <ul class="links">
      <li><a href="/faqs.htm">Frequently Asked Questions</a>
      </li>
      <li><a href="/aboutus/website-policies.htm">Website Policies</a>
      </li>
      <li><a href="/contacts.htm">Contact Us</a>
      </li>
    </ul>
    <ul class="social">
      <li class="youtube"><a href="http://www.youtube.com/user/Mywebsite">YouTube</a>
      </li>
      <li class="itunes"><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewArtistLegacy?cc=us&amp;id=216751324">iTunes</a>
      </li>
    </ul>
    <ul class="social">
      <li class="facebook"><a href="http://www.facebook.com/mywebsite">Facebook</a>
      </li>
      <li class="twitter"><a href="http://twitter.com/mywebsite">Twitter</a>
      </li>
    </ul>
    <div class="updated">
      <p>Last Updated: 03/06/2015</p>
    </div>
  </div>
  <!--! end of #footer-->
</div>
<!--! end of #footer-container -->