How to place a clickable icon behind banner image?

Question

I have this code:

<div align="center"><img src="http://via.placeholder.com/350x44" width="100%" height="44">
  <div align="right">
    <a href="fb.com/mypage"><img src="http://via.placeholder.com/20x22" width="22" height="20"></a>
    <div align="right">
      <a href="twitter.com/mypage"><img src="http://via.placeholder.com/20x22" width="22" height="20"></a>
    </div>
  </div>
</div>

Which looks like:

But in my achievement I like it to look like this image:

Please can any one give me simple css code for this?

I made you a snippet. It shows invalid HTML. Please correct it — mplungjan, Jan 21 '18 at 17:52
i cant figure out any error as it is in example please can explain saying — wapob, Jan 21 '18 at 18:08
You have no closing /divs and the two link divs are not chidlren of the banner div nor positioned absolutely or floated — mplungjan, Jan 21 '18 at 18:09
please do you mean i can't achieve my expected result with my stated example? Am new here — wapob, Jan 21 '18 at 18:15
https://stackoverflow.com/questions/1844207/how-to-make-a-div-to-wrap-two-float-divs-inside — mplungjan, Jan 21 '18 at 18:25

Bhuwan · Accepted Answer · 2018-01-21T19:35:17.287

First of all The align attribute is not supported in HTML5. Use CSS instead.

You can use position:absolute to right align your images. Just remember to set position:relative to your parent element.

Stack Snippet

.main {
  position: relative;
}

.right {
  position: absolute;
  right: 0;
  top: 0;
}

.right img {
  display: block;
  border: 1px solid red;
}

<div class="main">
  <img src="http://via.placeholder.com/350x44" width="100%" height="44">
  <div class="right">
    <a href="fb.com/mypage"><img src="http://via.placeholder.com/20x22" width="22" height="20"></a>
    <a href="twitter.com/mypage"><img src="http://via.placeholder.com/20x22" width="22" height="20"></a>
  </div>
</div>

How to place a clickable icon behind banner image?

1 Answers1