title: How to wrap text even with position absolute [CSS]
body: <p>I have a tiny issue with my website. As you can see on the picture (thats just an example), I have an image, which is aligned at the bottom of the container, with text around. The real picture is quite big, so I want text to float around, but at the same time it shall be aligned with the bottom right of the container. As I used position absolute, the image will overlap the text. How can I fix that? This shall be possible even with content of different length. So no matter how long the content is, I want my image always on the bottom right with the text wrapped around it.</p>
  <p>That is what it looks so far (very simplified - you can see it in the picture 1).</p>
  <p><img src="https://i.stack.imgur.com/d5ycY.png" alt="pic1" /></p>
  <pre><code>    &lt;div style=&quot;position: relative;&quot;&gt;&lt;img src=&quot;img/facebook.jpg&quot; style=&quot;position: absolute; bottom: 0; right: 0;&quot;&gt;
  TEXT
  &lt;/div&gt;
  </code></pre>
  <p>If I do it like this it works with the wrapping, but the image is always on top.</p>
  <p><img src="https://i.stack.imgur.com/1u3m5.png" alt="pic 2" /></p>
  <pre><code>&lt;div&gt;&lt;img src=&quot;img/facebook.jpg&quot; style=&quot;float: right&quot;&gt;
    TEXT
   &lt;/div&gt;
  </code></pre>
  <p>If I do it like this it works with the wrapping and the image is at the bottom of the page, but the image is always below the whole content and not next to it.</p>
  <p><img src="https://i.stack.imgur.com/Wg8Gk.png" alt="pic 3" /></p>
  <pre><code>&lt;div&gt;
    TEXT
  &lt;img src=&quot;img/facebook.jpg&quot; style=&quot;float: right&quot;&gt;
   &lt;/div&gt;
  </code></pre>
  <p>Thank you very muich for your help</p>