wrap text around image on bottom right of paragraph

Question

Hello I have an image at the end of a paragraph. I would like this image to be at the bottom right corner of the paragraph and the text to wrap around it. Right now I have the image in the right position but I cant get the text to wrap around it even if I float the elements.

Here is my code so far:

 p { float: left; } img { float: right; margin-top: -90px; } 

 <p> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <img src="http://www.barebooks.com/wp-content/uploads/2013/10/GM05.gif"> </p> 

Thanks!

Answer 1

This question has been discussed before:

See this stackoverflow.com question for background

 function sizeSpacer(spacer) { spacer.style.height = 0; var container = spacer.parentNode; var img = spacer.nextElementSibling || spacer.nextSibling; var lastContentNode = container.children[container.children.length - 1]; var h = Math.max(0, container.clientHeight - img.clientHeight); spacer.style.height = h + "px"; while (h > 0 && img.getBoundingClientRect().bottom > lastContentNode.getBoundingClientRect().bottom) { spacer.style.height = --h + "px"; } } onload = onresize = function() { sizeSpacer(document.getElementById("spacer")); }; 

 body { font-family: sans-serif; font-size: 12px; } img { width: calc(40% - 100px); float: right; clear: right; } #spacer { width: 0px; float: right; } 

 <div class="container"> <div id="spacer"></div> <img src="http://placehold.it/300x300" /> <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p> </div> 

Answer 2

Add display:flex; , and also if you want image to be 'push-down', the margin-top should be positive instead of negative.

p {
  display:flex;
  float: left;
}

img {
  float: right;
  margin-top: 90px;
}

Answer 3

This will float the image to the right and make the text wrap. https://codepen.io/anon/pen/xdvMLO .

HTML

<p><img src="http://www.barebooks.com/wp-content/uploads/2013/10/GM05.gif" class="floater">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
</p>

CSS

.floater {
  float: right;
  bottom: 0;
}

Answer 4

For a CSS only solution, I think you will need to know how tall the p is going to be in order to put it directly at the bottom right. If you do know, you can use a "pusher" div to push the image down. Also, the floated elements should come before the text that is wrapping:

JS Fiddle

CSS

.pusher {
  height: 90px;
  float: right;
}

img {
  clear: right;
  float: right;
}

HTML

<p>
  <div class="pusher"></div>
  <img src="http://www.barebooks.com/wp-content/uploads/2013/10/GM05.gif"> 
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text
</p>

Answer 5

You can use position:absolute; and bottom: 0; right: 0; bottom: 0; right: 0; to achieve what you want. Here is the updated JSFiddle: https://jsfiddle.net/v4L677uh/1/