How to wrap text around image with CSS?

Question

I need to display text and an image in a block (see the image). 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 have 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 this is possible with the shape-outside property, but unfortunately many of my users use non-supported browsers.

Can you try this? https://css-tricks.com/almanac/properties/s/shape-outside/ — m4n0, Aug 29 '19 at 22:42
@TemaniAfif - Why not vote or just close the question, why you add comment? — EternalHour, Aug 29 '19 at 22:51
Well, shape-outside is very cool. Unfortunately many of my users use non-supported browsers so I cannot use this property. I have edited the question accordingly. — Mauritz Hansen, Aug 29 '19 at 22:58
@EternalHour I close when I am sure it's a duplicate, if not I simply add it as *possible* duplicate as it can be helpful — Temani Afif, Aug 29 '19 at 22:59
@TemaniAfif - OP provided no CSS or HTML, so based on title alone it is in fact a duplicate. — EternalHour, Aug 29 '19 at 23:09
@EternalHour The OP already provided all what is needed in the question (a clear description + the CSS that he tried) and the duplicate link you are using isn't relevant to this question .. only the title is a duplicate — Temani Afif, Aug 29 '19 at 23:11

score 1 · Accepted Answer · answered Aug 29 '19 at 23:07

If it's only about one line and the width of the image is known you can consider the below trick with negative margin and pseudo element:

p:before {
  content:"";
  display:inline-block;
  margin-right:-100px; /* Same as width */
}
img {
 float:left;
 margin-top:1.2em;
 margin-right:5px;
}

/*Clear float*/
p:after {
  content:"";
  display:table;
  clear:both;
}

<p style="font-size:25px;"><img src="https://picsum.photos/id/0/100/100">lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem
</p>

<p style="font-size:20px;"><img src="https://picsum.photos/id/0/100/100">lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem
</p>

How to wrap text around image with CSS?

1 Answers1