Float image at the bottom of contained element

Question

I have a container with a floated image that looks like this:

<body style="
    width: 300px;
">
    <img style="
    background: red;
    width: 100px;
    height: 150px;
    float: right;
    /* position: relative; */
    /* top: 112px; */
"><h1 style="
    margin: 0;
">Lorem ipsum dolor sit amet
</h1>


    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>

</body>

What I'm trying to do is still have the image floated but put in in the end of the container, but the text should still wrap around:

Is this possible to do? Or do I have use some other css solution? Most important thing is that the text will still wrap around the image from above. I have looked at the earlier questions with similar question title but I don't think they are trying to accomplish this exact thing, rather using floats for design etc..

@AbdelrahmanGobarah No framework, I'd like to accomplish this with plain css. — user1506145, Feb 03 '20 at 16:25
Does this answer your question? [Floating an image to the bottom right with text wrapping around](https://stackoverflow.com/questions/19770925/floating-an-image-to-the-bottom-right-with-text-wrapping-around) — technophyle, Feb 03 '20 at 16:33

Abdelrahman Gobarah · Answer 1 · 2020-02-03T16:32:46.720

use display: table and table-cell then Vertical-align: bottom;

.img {
  background: red;
  width: 100px;
  height: 150px;
  float: right;
  /* position: relative; */
  /* top: 112px; */
}

<body style="width: 300px;">
  <div style="display: table">

    <div style="display: table-cell">

<h1>Lorem ipsum dolor sit amet</h1>

      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>

    </div>

    <div style="display: table-cell; vertical-align: bottom;">
    
      <img class="img" />
    </div>

  </div>

</body>

This doesn't meet the requirement stated in the question "Most important thing is that the text will still wrap around the image from above." (although that requirement isn't demonstrated on the image) — Quentin, Feb 03 '20 at 16:35

Float image at the bottom of contained element

1 Answers1