I need to display a text and an image in a div block I have positioned the image a little lower in order to make it clear the the image is covering some text. The text should start in the top line, so above the image, but thereafter should continue to the right of the image.
I tried to do this with float:left on the image, which works but then all the text moves to the right of the image. When I use position:absolute the image is on top of the text. If I use float:left with transform: translateY then the text also shows to the right of the image and does not flow around the image.
I know it is possible with the shape-outside property, but unfortunately many of my users not use supported browsers.
it's only one line and the width of the image is known you can consider the below trick with negative margin and pseudo element: