CSS - How to align image left bottom to the text block?

Question

As this image ?

Answer 1

That is now possible using CSS Shapes with either known container height or the use of js.

You need a floated 100% height image container:

height: 100%; /* either js or known parent height */
float: left;
width: 100px;

Actual shape of the float is a bottom-aligned rectangle defined by shape-outside property:

shape-outside: polygon(
   0 100%,                  /* bottom left point */
   100px 100%,              /* 100px to the right */
   100px calc(100% - 100px) /* 100px above the bottom */
);

var text = document.querySelector('.text');

// setting container height + some extra space to compensate for the "image"
text.style.height = (text.clientHeight + 20) + 'px';

.text {
  columns: 2;
  /* also works with columns! */
  -webkit-columns: 2;
  width: 600px;
}
.text-known-height {
  height: 230px;
  width: 400px;
}
.text p {
  margin-bottom: 10px;
  margin-top: 0;
}
.float-bottom {
  background: rgba(0, 0, 0, 0.1);
  width: 100px;
  height: 100%;
  position: relative;
}
.float-right {
  float: right;
  shape-outside: polygon(100% 100%,
  /* bottom right point */
  calc(100% - 100px) 100%,
  /* 100px from right edge */
  calc(100% - 100px) calc(100% - 100px));
}
.float-right .image {
  right: 0;
  left: auto;
}
.float-left {
  float: left;
  shape-outside: polygon(0 100%,
  /* bottom left point */
  100px 100%,
  /* 100px to the right */
  100px calc(100% - 100px)
  /* point 100px above the bottom */
  );
}
.image {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: white;
  background: #7233B6;
}

  
  




  
Unknown height container
  

    

      
image
    
    

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec neque lacinia, fermentum neque quis, feugiat erat. Nam et sem aliquam, placerat nulla eu, lobortis enim. Nulla ut semper urna. Sed et diam arcu. Vestibulum ante ipsum primis in faucibus
      orci luctus et ultrices posuere cubilia Curae; Duis sodales, ex a euismod dignissim, magna nulla egestas urna, non fringilla velit lorem ornare turpis. Sed nibh ipsum, iaculis nec mi sed, tincidunt ultrices magna. Nulla posuere orci erat, id fringilla
      magna hendrerit id. Etiam vestibulum arcu feugiat risus lacinia pretium. Donec ut nisi vitae tortor faucibus bibendum eu ac massa. Pellentesque ac magna eget nunc efficitur ultrices nec in ipsum. Praesent interdum elementum turpis.
      

        Sed suscipit nulla eu dapibus dignissim. Vestibulum scelerisque sed turpis eget ultrices. Ut ut pharetra ex. Nam hendrerit magna a varius vehicula. Nunc risus dui, dictum et ex quis, viverra interdum sem. Proin varius sapien ipsum. Maecenas felis purus,
        egestas a massa non, pharetra vulputate tellus. Suspendisse potenti. Sed viverra aliquam iaculis. Quisque non diam sapien. Curabitur semper velit non urna congue, at consectetur turpis finibus.
  

  
Known height
  

    

      
image
    
    

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec neque lacinia, fermentum neque quis, feugiat erat. Nam et sem aliquam, placerat nulla eu, lobortis enim. Nulla ut semper urna. Sed et diam arcu. Vestibulum ante ipsum primis in faucibus
      orci luctus et ultrices posuere cubilia Curae; Duis sodales, ex a euismod dignissim, magna nulla egestas urna, non fringilla velit lorem ornare turpis. Sed nibh ipsum, iaculis nec mi sed, tincidunt ultrices magna. Nulla posuere orci erat, id fringilla
      magna hendrerit id. Etiam vestibulum arcu feugiat risus lacinia pretium. Donec ut nisi vitae tortor faucibus bibendum eu ac massa.