Problems with sticky footer

I’m trying to get my footer to stick to the bottom of my page. I’ve followed loads of different tutorials (most of them very similar) on sticky footers, but none of them have worked for me. For some reason the footer positions itself at the bottom of the browser window instead of the actual page…

This is the layout of divs in my HTML:

<div id="wrapper">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>

This is my CSS:

html, body {
height: 100%;

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

#content {
position: absolute;
padding-bottom: 300px; (same as footer height)
}

#footer {
width: 100%;
height: 300px;
position: absolute;
bottom: 0px;
}