-1

So, supposing a layout that consists of:

  • A container
  • An image
  • And some text

And supposing an HTML structure as follows:

<div class="container">
    Lorem ipsum is amazing but hey it's getting boring 
    to always read that sitamet thing, let's be original
    at least once in a lifetime.
    <img src="#" alt="...">
</div>

I want to achieve something as follows:

enter image description here

Key considerations:

  • The image is positioned at the bottom left corner of the container.
  • The text does "flow" around the image.

The float property would work for the text wrapping:

enter image description here

... but I did not manage to apply a "float in the bottom" display. There are some javascript solutions to make a "float in the bottom" happen but I prefer to make this work with pure CSS.

Some things I tried are:

With position absolute:

img{
position: absolute; 
bottom: 0;
}

In this case the image is over the text. I also tried to clip-path it but of course the text behind the image gets lost.

Also tried with a two columns CSS grid:

.container{
display: grid;
grid-template-columns: 1fr 2fr;
}

img{
width: 100%;
height: 100%;
object-fit: cover;
}

But in this case the image gets way too cropped.

Note: I am aware of the fact that this question already exists but in a 12 years old topic (where the most voted answer does not work) that end up with the conclusion that it's not possible or that a jQuery plugin may be used. So I am asking it today, a time in which CSS and browser compatibility evolved a lot.

E_net4
  • 27,810
  • 13
  • 101
  • 139
Álvaro Franz
  • 699
  • 9
  • 26

1 Answers1

1

first of all put your text inside <p> </p>,If you want to get the look of your example image, diferent conteiner for your image, and float that container to the left like below:`

<div class="container">
   <div class=image>
      <img src="#" alt="...">
   </div>
   <p>Lorem ipsum is amazing but hey it's getting boring 
      to always read that sitamet thing, let's be original
      at least once in a lifetime. </p>
   <div class="clear-float"></div>
</div>

and then use below css, you will get the same look:

    .image{
    border: 3px lime solid;
    border-radius:20px;
    float:left;
    margin-right:15px;
    margin-bottom:5px;
    }
    img{
    position:relative;
    border-radius:20px;
    bottom:-9px;
    right:-5px;
    z-index:-1;
    }
   .clear-float{
    clear:both;
    }

<div class="clear-float"></div> is to clear your float in order to not mess up your future content.

Adaminatti
  • 11
  • 3