float image to the right of paragraph when is below the paragraph

Question

I am looking for a CSS-only solution (if this is possible). So no changes to my HTML and no use of JavaScript. This is my HTML:

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum.
</p>
<img src="http://www.fillmurray.com/284/196">

My HTML is part of a larger number of tags that also contain regular <p>'s that should look like regular paragraphs.

This is the preferred result:

The only thing I could come up with was using a combination of inline-block and float:

p {
  display: inline-block;
  max-width: calc(100% - 284px);
}

img {
  display: inline-block;
  float: right;
}

The problem with this 'solution' though, is the text will not wrap around the image when the height of the text becomes greater than the height of the image. (See snippet below for an example).

Question: Without changing any of my HTML (ie: moving the img tag above the p tag), can this be done?

p {
  display: inline-block;
  max-width: calc(100% - 284px);
}

img {
  display: inline-block;
  float: right;
}

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum.
</p>
<img src="http://www.fillmurray.com/284/196">

Temani Afif · Answer 1 · 2022-08-03T22:29:36.043

If the dimension of the image is known you can create a "fake" floated element like below. Don't forget to clear float if you have any content after

p {
  float:left;
  margin:0;
}
p:before {
  content:"";
  float:right;
  width:290px; /* width of the image plus a few pixel for margin */
  height:196px; /* height of the image */
}

img {
  float:left;
  margin-left:-284px; /* width of the image */
}

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum.
</p>
<img src="http://www.fillmurray.com/284/196">

Using :has() selector to apply the styles only if the image is after the p element

p:has(+ img) {
  float: left;
  margin: 0;
}
p:has(+ img)::before {
  content:"";
  float: right;
  width: 290px; /* width of the image plus a few pixel for margin */
  height: 196px; /* height of the image */
}

p + img {
  float: left;
  margin-left: -284px; /* width of the image */
}

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. 
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum.
</p>
<img src="http://www.fillmurray.com/284/196">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. 
</p>

Was 2s from pasting this in, you can nest your HTML in a container with a static height and width to see the change, or just resize! — Kameron, Dec 22 '21 at 19:29
This is a nice solution, but in my case I have one issue: the image and text are part of a larger amount of HTML containing mutiple `
` tags, which not all have an image after them. Because there is no "previous" selector in CSS to target any
that comes before an image, I don't know how I can make regular paragraphs look regular. I will add this information to the question, I did not consider the relevance before. — Dirk J. Faber, Dec 22 '21 at 19:33
@DirkJ.Faber well, include all the detail to get accurate answers ... — Temani Afif, Dec 22 '21 at 19:35
@DirkJ.Faber the edit you made doesn't help. We need to know your HTML structure otherwise we cannot give a solution because the solution is link to your specific code — Temani Afif, Dec 22 '21 at 19:43
The problem is, the HTML structure changes, depending on data. There can be multiple ` `
` tags and `` tags. — Dirk J. Faber, Dec 22 '21 at 19:46
@DirkJ.Faber then what you want is impossible. We cannot style "something we don't know". At least we need to know all the possible combinations if they are exhaustive — Temani Afif, Dec 22 '21 at 19:49
I think you are right. If the CSS `:has()` selector will one day be supported, this should be easy to do. — Dirk J. Faber, Dec 23 '21 at 13:16

float image to the right of paragraph when is below the paragraph

1 Answers1