CODEWITHSUNDEEP
htmlcss
Bekki
Bekki

Reputation: 729

Positioning image based on div position

I've got a div somewhere closer to the center of the page. Below is the div structure.

<div id="newsFeed">
   <img id="thumb" src="news/news123.png" height=50 width=50 />
</div>

css:

#newsFeed{
    position: absolute;
    width: 100%;
    height: 100%;
}
#thumb{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

How can I move the image 20px to the right from the current position?

Upvotes: 0

Views: 51

Answers (1)

Tushar
Tushar

Reputation: 87233

You can shift the image to the right by setting its margin-left to 20px. This will add 20px space to the left of the image, giving impression that image is shifted 20px to the right.

#thumb {
    margin-left: 20px;
}

Demo

#newsFeed {
  position: absolute;
  width: 100%;
  height: 100%;
}
#thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-left: 20px;
}
<div id="newsFeed">
  <img id="thumb" src="news/news123.png" height=50 width=50 />
</div>

Alternatively, you can also set the left to 20px.

#thumb {
    ....
    left: 20px;
}

Demo

#newsFeed {
  position: absolute;
  width: 100%;
  height: 100%;
}
#thumb {
  position: absolute;
  left: 20px;
  right: 0;
  top: 0;
  bottom: 0;
}
<div id="newsFeed">
  <img id="thumb" src="news/news123.png" height=50 width=50 />
</div>

Upvotes: 2

Related Questions