float image to the right of paragraph when <img> is below the paragraph

user_9230154 0
Viewed 127

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: 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">

css
1 Answers

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>

user_86203330
Related