HTML - aligning image on the footer

Question

I'm having trouble trying to align my image to the bottom of the page. I'm editing my worpdress php files: footer.php for the html and stylesheet.css for the css. When I change the bottom dweller or the wrapper height it doesnt change the position of the image. How do I change the html/css so that it sits at a certain point at the bottom of the page?

HTML

 <div id="wrapper">
         <div id="bottomDweller">
         <img src="http://anbhialann.ie/wp-content/uploads/2014/01/Menu-Pages-Badge.png" alt="Bottom of the page" width="42" height="42"></div>
    </div>

CSS

#wrapper {height: 500px; position:relative;}
#bottomDweller {position: absolute; bottom:20px;}

Answer 1

Like this

remove bottom:20px in below #bottomDweller ;

demo

css

#bottomDweller {
    position: absolute;
    bottom: 0;
    background-color:red;
}