How to dynamically put buttons on the corners of different size images? CSS

Question

I have a variety of different size images that I am overlaying a button on the top left and top right corners.

The left button is fine because the images are left justified, but the right button is inconsistent.

In Chrome, the button appears on the top right corner of the image (correct) in IE, the button appears on the top right of the containing div (incorrect).

See attached, any ideas?

HTML:

CSS:

.results {
   display: inline-block;
}

.resultOptions {
   position: relative;
   display: block;
   width: 80%;
}

.resultOptions i {
   position: relative;
   padding: 5px;
   margin-top: -120px;
}

IE:

Chrome:

user_2802040 · Answer

Position the icon container absolutely over the image and the align the icons how you want.

.results {
  display: inline-block;
  position: relative;
}

.resultOptions {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
}

i {
  margin: .5em;
  color:white;
}

user_804867 · Answer

Use absolute positioning inside an a relative positioned parent. Trying to shove things around with negative margins and such can be error prone.

body {
  margin: 0;
  display: flex;
}

.group {
  margin: 10px 5px;
  position: relative;
}
.options .option {
  position: absolute;
  width: 20px;
  height: 20px;
}
.options .bookmark {
  top: 5px;
  left: 5px;
  background-color: rebeccapurple;
}
.options .info {
  top: 5px;
  right: 5px;
  background-color: indianred;
}

user_2442099 · Answer

as commented earlier: the duo : relative/absolute and text-align-last can be used together.

.results {
  display: inline-block;
  position: relative;
}

.resultOptions {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  right: 0.5em;
  text-align-last: justify;
  color:blue;
  ;
}

user_4312515 · Answer

I think that you are trying the wrong way. You should try to handle this by using the position css property. See https://www.w3schools.com/css/css_positioning.asp

for your right top icon
.resultOptions-left {
   position: absolute;
   top:0px;
   right:0px;
}
for your left top icon
.resultOptions-right {
   position: absolute;
   top:0px;
   left:0px;
}

This should place that div on the top right corner of It's first relative parent

user_1741598 · Answer

I would use absolute positioning on the buttons. The image will fill the width of the wrapping div which is positioned relatively, then just position the buttons absolutely with left:0 (or whatever) and right:0. Right now you have them floated via pull-left and pull-right. You will need to position the wrapper relatively to make the absolutes work correctly. See my codepen.


  
  
  


.results {
   display: inline-block;
   position:relative;
}

.resultOptionBookmark, .resultOptionInfo {
   position: absolute;
   padding: 5px;
   top:0;
}

.resultOptionBookmark{
  left:0;
}

.resultOptionInfo{
  right:0;
}

How to dynamically put buttons on the corners of different size images? CSS

5 Answers