I can't move image file anywhere using css - html

Question

This is my first time posting here. Been a long time fan coming here every once in a while, hopefully someone can lead me to the right direction. I have an image file that I am unable to move anywhere. The image file is in a div that is in a tag that I want positioned to the bottom right of the div. I have used top-margin and left margin to no avail it is always just sitting there in the same position. Below is the code that pertains to the problematic area. Html part followed by the css part.
<div id = "container">
<section id = "content">
<article>
<div id ="monkey_img"><img src="images/cartoon-monkey_1.png" width="250" height="252"></div>
</article>
</section>
<aside id="sidebar">
<p>Monkey</p>
</aside>
</div>
<!--css-->
#content{
width: 600px;
height: 475px;
background-color: #FFF;
border-style: solid;
border-width: 2px;
float:left;
margin-right:30px;
}
#monkey_img{
width:500px;
height:425px;
margin-top:100px;
margin-left:100px;
display:block;
}
#container{
width:1000px;
height:550px;
margin:auto;
margin-top:65px;
}
#container p{
padding:15px;
}
#sidebar{
width 275px;
height:475px;
background-color:#FFF;
border-style:solid;
border-width: 2px;
margin-left:30px;
overflow:auto;
}

Answer 1

You'll probably want to set {position: relative} on the parent, and {position: absolute} on the element you're trying to move. You can then set top/right/bottom/left as you see fit.
http://jsfiddle.net/XemPh/2/
#monkey_img {
width:200px;
height:200px;
background-color: #eee;
position: relative;
}
#monkey_img img {
position: absolute;
right: 0;
bottom: 0;
}
<div id="monkey_img">
<img src="http://placehold.it/100x100" />
</div>
In this example I've applied the styles directly to the image, but you could do the image's wrapper and that element's parent as well.