0

I have a tiny issue with my website. As you can see on the picture (thats just an example), I have an image, which is aligned at the bottom of the container, with text around. The real picture is quite big, so I want text to float around, but at the same time it shall be aligned with the bottom right of the container. As I used position absolute, the image will overlap the text. How can I fix that? This shall be possible even with content of different length. So no matter how long the content is, I want my image always on the bottom right with the text wrapped around it.

That is what it looks so far (very simplified - you can see it in the picture 1).

pic1

    <div style="position: relative;"><img src="img/facebook.jpg" style="position: absolute; bottom: 0; right: 0;">
TEXT
</div>

If I do it like this it works with the wrapping, but the image is always on top.

pic 2

<div><img src="img/facebook.jpg" style="float: right">
  TEXT
 </div>

If I do it like this it works with the wrapping and the image is at the bottom of the page, but the image is always below the whole content and not next to it.

pic 3

<div>
  TEXT
<img src="img/facebook.jpg" style="float: right">
 </div>

Thank you very muich for your help

dsdxb
  • 1
  • 1

1 Answers1

0

Try this

img {
  float:right;  
  clear:both;
  width: 50% ;
  margin: 30px -50px 10px 10px ;
}
.rightimage:before {
  content: '' ;
  display:block;
  float: right;
  height: 200px;
}

https://codepen.io/atomworks/pen/algcz

https://stackoverflow.com/questions/1915831/text-wrapping-around-an-absolute-positioned-div#:~:text=HTML,-%3Cdiv%20id%3D%22&text=Absolute%20positioning%20does%20not%20let,position%20using%20margin%20or%20padding.

M123
  • 1,203
  • 4
  • 14
  • 31
  • unfortunately that doesn't help. I can now move the image to the bottom, but not dynamically (sorry, I should have mentioned that). If the content is bigger, the text just flows below it as well, what I dont want – dsdxb Jan 12 '21 at 07:25