htmlcssalignmentcss-floatvertical-alignment

CSS float bottom right

I have some text with two images floating around it:

<!--This is obviously a simplified version, there are other styles needed for the images below-->
<div id="wrapper">
    <h2>Title</h2>
    
    <figure id="image1" style="float: left">
        <img />
        <figcaption>Caption</figcaption>
    </figure>
    
    <figure id="image2" style="float: right">
        <img />
        <figcaption>Caption</figcaption>
    </figure>
    
    <p>Lorem Ipsum</p>
</div>

This is how it looks like:

Actual CSS

What I would want is either the first or the second image to be positioned the the very bottom of the paragraph. Something like this (made using Photoshop):

What I would like

I obviously cannot set position: absolute, since the text would no longer float around the image.

I cannot display the wrapper as a flexbox, since it alignes the elements on one line (or multiple lines) and breaks everything:

Using Flexbox

I even tried displaying the wrapper as a table and aligning the figure to the bottom using display: table-cell; vertical-align: bottom, but float no longer works in that case and the figure is aligned to the center.

The only partial solution I managed to get was using clear: both on the figure:

Clear: both

The problem with this is that when resizing the page the height of the paragraph changes, the image is no longer at the bottom of it.

The only similar answer I could find on SO was this one, but it didn't work in my case since I don't know the paragraph height in advance.

Any ideas to make it work? Thanks in advance.

Solution

  • You can do it with shape-outside.

    .container {
  display: flex;/* I need this to use height:100% */
}

#image2 {
  height: 100%; /* take full height */
  float: right;
  /* the below will allow the text to wrap around */
  shape-outside: inset(calc(100% - 135px) 0 0 0); /* 135px is an approximation of the figure height */
  /* move image and caption to bottom (the area kept by shape-outside) */
  display: flex;
  flex-direction: column;
  justify-content:flex-end;
}

#wrapper {
  font-size: 20px;
  text-align: justify;
}

figure {
  margin: 10px;
  text-align: center;
  float: left;
}

p {
  margin: 0;
}
    <div class="container">
  <div id="wrapper">
    <figure id="image1">
      <img src="https://picsum.photos/id/1/100/100">
      <figcaption>Caption</figcaption>
    </figure>

    <figure id="image2">
      <img src="https://picsum.photos/id/1/100/100">
      <figcaption>Caption</figcaption>
    </figure>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nunc ante, cursus ac aliquet id, aliquet vitae orci. Sed faucibus, lorem a dictum iaculis, quam dolor aliquam mauris, eu dapibus ligula tellus quis urna. Maecenas sed justo pharetra,
      fringilla ex a, scelerisque justo. Quisque augue tellus, volutpat vel suscipit et, porta eget neque. Mauris pretium nunc in augue porta, sed egestas risus scelerisque. Nullam tortor nisl, suscipit a enim sit amet, rutrum maximus mauris. Nullam maximus
      lectus ac magna suscipit, nec efficitur nunc finibus. Curabitur malesuada orci nec semper elementum. Sed dignissim, tortor vitae rhoncus tempor, arcu mi facilisis nibh, vel consequat odio ipsum non augue. Sed diam est, facilisis ut cursus eu  rhoncus tempor, arcu mi facilisis nibh, vel consequat odio ipsum non augue. </p>
  </div>
</div>

    Read my article for more detail: https://css-tricks.com/float-an-element-to-the-bottom-corner/