I can’t move image file anywhere using css


I can’t move image file anywhere using css

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.

#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; }

Problem courtesy of: NoobCoder


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.


#monkey_img {
    background-color: #eee;
    position: relative;
#monkey_img img {
    position: absolute;
    right: 0;
    bottom: 0;

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.

Solution courtesy of: isherwood


I can’t move image file anywhere using css






I can’t move image file anywhere using css