how to wrap text around an image at the bottom of the parent

Question

How can i make a paragraph text wrap around an image or any other element when the element is at the bottom of the parent element?

Markup:

<div class='post'>
   <p class='post-content'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque imperdiet
      condimentum pulvinar. Pellentesque mattis fringilla dui, sit amet adipiscing augue
      elementum eget. Fusce ut dapibus neque. Quisque mattis lectus ac justo euismod
      luctus. Donec auctor volutpat rhoncus. Duis lacinia sodales sem ut placerat. Donec
      sodales, urna vitae dapibus mattis, turpis velit bibendum enim, in auctor elit neque
      in augue.

      <img src="" style="width:5em; height:5em; float:right;"/>
   </p>
</div>

please assume the text and the image is in a parent div. i guess it would be easy if you could float an element to the right and to to bottom.

what i want it to look like:

Lorem ipsum dolor sit amet, consecteturadipiscing elit. Quisque imperdiet
condimentum pulvinar. Pellentesquemattis fringilla dui, sitametadipiscing augue
elementum eget. Fusce ut dapibus neque.Quisque mattis lectus ac justo euismod
luctus. Donec auctor volutpat rhoncus. ______________________________________
Duis lacinia sodales sem ut placerat.  |                                     |
Donec sodales, urna vitae dapibus      |                                     |
mattis, turpis velit bibendum enim,    |                                     |
in auctor elit nequein augue.          |                the image            |
text text asjdjaskd asjkdh aks asdj    |                                     |
sahdahd jas asjksj haskdhsjad sjj      |                                     |
alsja asdajdkj j sjjakks asj h h gs    |                                     |
sss the text is wrapped here text t    |_____________________________________|

any ideas?

Answer 1

Use CSS:

align

In the img tag, see this example image-text-wrap-css-html