2

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!

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
cup_of
  • 6,397
  • 9
  • 47
  • 94

4 Answers4

0

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;
}
hcheung
  • 3,377
  • 3
  • 11
  • 23
  • I don't think this will allow the text to wrap above the image: https://jsfiddle.net/v4L677uh/3/ – Derek Story Jun 01 '17 at 00:28
  • @DerekStory, sorry for missing the part of 'wrap-around'. Your solution of using a pusher is brilliant, never thought of that. – hcheung Jun 01 '17 at 01:19
0

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>
Derek Story
  • 9,518
  • 1
  • 24
  • 34
  • i dont know how tall the p will be especially since the container will take a percentage width to be responsive around the tablet size. i see your logic though – cup_of Jun 01 '17 at 00:31
  • You will most likely have to have JS to calculate it then. – Derek Story Jun 01 '17 at 00:31
-2

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;
}
Axion
  • 682
  • 4
  • 20
  • This will put the image at the top-right with text wrapping underneath. The question is asking for the image to be in the bottom right with text wrapping above it. – Derek Story Jun 01 '17 at 00:29
  • i dont believe the bottom 0 does anything here – cup_of Jun 01 '17 at 00:30
-3

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

Felix Guo
  • 2,700
  • 14
  • 20