How can I wrap text around a bottom-right div?

Question

Every time I try to do something seemingly-simple in CSS, it doesn't work.

I have a content div that contains a 460x160 image. All I want to do is position the image at the bottom-right corner and wrap my text around it.

<div id="contents">     <img src="..." />     text text text text text text ... </div> 

So I want it to look like:

------------------ | text text text | | text text text | | text text -----| | text text |    | ------------------ 

Doing it with a top-left or top-right image is cake:

#contents img { float:right; }  ------------------ | text text |    | | text text -----| | text text text | | text text text | ------------------ 

Now how do I push that to the bottom? The best I've come up with so far are:

#contents img { float:right; margin-top: 90%} // really needs to be 100%-160px  ------------------ | text text      | | text text      | | text text -----| | text text |    | ------------------ 

In this case the text does not print in the margin, so there is white space above the image.

#contents { position:relative; } #contents img { position:absolute; right:0; bottom:0; }  -or-  // move the img tag under the text in the html and: #contents img { float:right; margin-top:-160; }  ------------------ | text text text | | text text text | | text text -----| | text text | te | ------------------ 

In this case the text prints over or under the image.

So... how can I accomplish this?

Answer 1

It sure seems to have been asked before (2003), and before (2002), or before (2005)

The last link actually suggest a javascript-based solution, but for a fixed (i.e. non fluid) solution.

It is consistent however, with other advices found

The only way to do that is to put the floated element somewhere in the middle of the text. It's impossible to get it perfect all of the time.

Or this one:

It consists of floating a vertical "pusher" element (such as img, but it's probably smarter to just use an empty div), then floating the desired object under it, using the clear property. The major problem with this method is you still have to know how many lines there are of text. It makes things MUCH easier though, and could definitely be coded with javascript, just need to change the height of the "pusher" to the height of the container minus the height of the float (assuming your container isn't fixed/min height).

Anyway, as discussed in this thread, there is no easy solution...

---

Cletus mentions in the comments this thread from 2003, which states once again the fact it can not easily be achieved.
However, it does refer to this Eric Meyer's article, which comes close to the effect you want to achieve.

By understanding how floats and the normal flow relate to each other, and understanding how clearing can be used to manipulate the normal flow around floats, authors can employ floats as a very powerful layout tool.
Because floats were not originally intended to be used for layout, some hacks may be necessary to make them behave as intended. This can involve floating elements that contain floats, "clearing" elements, or a combination of both.

---

Yet, Chadwick Meyer suggests in his answer a solution based on the :before CSS selector (variation of Leonard's answer).
It does work here.

---

Update Apr. 2021: Temani Afif suggests in his answer using exbox combined with a shape-outside.
But do check out the Backwards Compatibility of Flexbox, even though its support by all browsers is quite good.