How to Wrap Text Around an Image with Different Positioning

Design help Custom code
1

Hello,

I’m trying to wrap the text in this container around the black and white image. I have it set to Relative, float right, but to get it to overlay on the top I had to add negative positioning on the image.

Screen Shot 2021-08-19 at 9.10.53 PM
Screen Shot 2021-08-19 at 9.10.53 PM2380×1230 203 KB

So the paragraph thinks the image is still sitting to the right and isn’t wrapping in the correct place. Anyone have any ideas how to fix this? Any help is greatly appreciated! Thank you in advance!!

Best,
Andrea

2

Hello @Andrea_Eppy !

Can you share your Read-Only link so we can dive in the Designer? :slight_smile:

3

Sure thing, here you go: https://preview.webflow.com/preview/blog-portfolio-e0157b?utm_medium=preview_link&utm_source=designer&utm_content=blog-portfolio-e0157b&preview=833b2e93d004e4dd877a36da552bc5f6&workflow=preview

4

Hi again :slight_smile:
Is it the result you were looking for ?

Capture d’écran 2021-08-21 à 08.05.18
Capture d’écran 2021-08-21 à 08.05.181920×1048 126 KB

  1. I grouped the paragraph and the image together under the same div.
  2. Applied the float right on the image as you did
  3. Played with the margin right and top to position the image better while affecting the paragraph to make it wrap
  4. Then reset the position on the lower breakpoints as it push the image too far to the right

Hope it helps !

5

Hey Jean-Philippe! Thanks so much for your reply. Sorry I should have specified better; I’m actually wanting to keep the photo overlaid on the top a bit like this screenshot from the original design, but just have the text also wrap around it (not behind like in the screenshot). Would you know how to do that? Thanks in advance!!

Screen Shot 2021-08-21 at 4.44.02 PM
Screen Shot 2021-08-21 at 4.44.02 PM1580×1212 163 KB

6

hi @Andrea_Eppy sorry to step into this request but here is a few links you should visit as your request is related directly to CSS only.

basic principles WFU

wrap shapes YT

Hope that after visiting these links will be answer to your question how to more clear but feel free to find more articles about this techniques on net.

7

Hey :slight_smile:
You can add some negative margin to move it top (in addition to my previous message).
But then, you’ll still have the text to the left and image to the right : the text does not continue to the right of the image like in your screenshot.
One way to achieve the last point would be with custom code where you would put an <img> inside you <p> (is that semantically clean?.. :thinking: ). The image would be inline with the text but won’t automatically be to the right of this section, depending on the width of the window.