0

I have the following code

* {
    box-sizing: border-box;
}

.wrapper {
    position: relative;
    /* border:1px solid blue; */
    width: 250px;
}

.text {
    position: absolute;
    border:1px solid red;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
<div class="wrapper">
        <img src="https://i.picsum.photos/id/1009/250/350.jpg?hmac=bdLFFsAiiy7l58PX8gjUFEa8OMm_xRVeHlYMRtiiV40" />
        <div class="text">
            <button>Btn</button>
        </div>
   </div>

so one image and text under the image.

I need to have my image on the place where the image is ending - but i can't find a way to do it with positioning.

The text should be 100% of he width of the parent

as you can see there is small breaking at the end - so my button is not ending on the line where the image ends

How can i solve this

Ahmad MRF
  • 1,346
  • 1
  • 6
  • 16
someusername12
  • 45
  • 6
  • Your image is not sitting at the very bottom of its parent wrapper. See duplicate for how to fix that. – CBroe May 10 '22 at 13:09

1 Answers1

-1

Try this:

<style>
    * {
    box-sizing: border-box;
}

.wrapper {
    position: relative;
    /* border:1px solid blue; */
    width: 250px;
}
.wrapper img {float:left}
.text {
    float:left;
    margin-left:10px;
}
  </style>
   <div class="wrapper">
        <img src="https://i.picsum.photos/id/1009/250/350.jpg?hmac=bdLFFsAiiy7l58PX8gjUFEa8OMm_xRVeHlYMRtiiV40" />
        <div class="text">
            <button>Btn</button>
        </div>
   </div>
Sudhir
  • 113
  • 8