Normal "footer not sticking to the bottom" solution not working

I need the web page footer to be positioned at the bottom of the browser window, and not just position: fixed so if the window is resized smaller the footer shouldn't go up any further than the bottom of the parent container's content (you'd have to scroll down the window to see the footer there).

The solution I'm most familiar with (below) isn't working for me. Suggestions?

HTML:

<div class="container">
    <div class="content">
        top content
    </div>
    <footer>
        footer content
    </footer>
</div>

CSS:

body, html { height: 100% }
.container {
  margin: 0;
  min-height: 100%;
  position: relative;
  width: 100%;
}
.content {
  padding: 15px;
  margin-bottom: 36px;
  width: 1000px;
}
footer {
  background: #00a7d4;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  bottom: 0;
  color: #fff;
  font-size: 11px;
  height: 36px;
  color: #fff;
  font-size: 11px;
  position: absolute;
  width: 100%;
}

Solution

Try changing margin-bottom to padding-bottom:

.pageContainer {
  /* margin-bottom: 36px; */
  padding-bottom: 36px;
}

http://jsfiddle.net/6HrLu/

Works on Chrome.