How to place image in column number two using the CSS column-count property?

Question

How to place image in column number two?

$(document).ready(function() {
  $(window).trigger('resize');
});

$(window).resize(function() {
  divH = $('div').height();
  console.log(divH);
  newH = divH - 105;
  $('div  img').first().css({
    "height": newH + "px"
  })
});

.invisible {
  float: right;
}

.bottom {
  float: right;
  padding-left: 10px;
  padding-top: 0px;
  clear: right;
  bottom: 10px;
}

div {
  max-width: 700px;
  margin: 0 auto;
  margin-top: 4em;
  text-align: justify;
}

p {
  text-align: justify;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="column-count: 2;">
  <img src="http://placekitten.com/100" class="invisible" width="0" height="206"></img>

  <img src="http://placekitten.com/100" class="bottom" width="100" height="100"></img>

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem aspernatur ut impedit, quod, similique obcaecati velit sit distinctio ab, vitae labore, quibusdam excepturi iure maxime nihil tenetur dicta. Iure, dolor. Lorem ipsum dolor sit amet,
  consectetur adipisicing elit. Possimus adipisci, porro vitae perferendis similique ullam sint, aut labore! Similique rerum inventore dolor sint quae cupiditate repellat debitis saepe quia laboriosam! Lorem ipsum dolor sit amet, consectetur adipisicing
  elit. Perferendis autem in quaerat itaque, architecto deserunt inventore officiis laborum commodi, corporis quam dolorum labore optio earum unde adipisci impedit, sed sint! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut voluptatem rem
  in mollitia voluptatum laboriosam expedita, ut tempora blanditiis et tempore sapiente minima consequatur facere voluptatibus quibusdam ad sed velit vero nesciunt ipsa. Possimus impedit labore non cumque, culpa nam. Lorem ipsum dolor sit amet, consectetur
  adipisicing elit. Optio numquam, temporibus velit quas quod, aliquid iure, possimus molestiae laboriosam perspiciatis a iusto dignissimos magni suscipit officiis nesciunt. Sapiente corporis optio mollitia, enim temporibus dolore amet magni, at hic laboriosam
  atque beatae, quas eum, laudantium. Distinctio maxime commodi sunt quis soluta sequi labore ratione ad atque saepe cupiditate tempora ab numquam consectetur tenetur voluptatem inventore porro, ut obcaecati magnam culpa. Architecto consequuntur recusandae
  ut aperiam ullam harum officia maiores cumque cupiditate id. Modi, labore id dignissimos ducimus laborum temporibus pariatur, quae reprehenderit at tenetur mollitia, recusandae quas commodi quidem soluta repellat.
</div>

Image tags are self-closing. It's invalid to use this syntax. You get warned by the coloration in the snippet editor. — isherwood, Jan 19 '22 at 14:31
This structure isn't really two columns. It's one column that gets wrapped. If you want explicit control over location of the images you should use actual column markup. — isherwood, Jan 19 '22 at 14:34
The img tags absence does not solve the problem, and a simple column layout not suitable. — smallMars, Jan 19 '22 at 14:37
I wasn't describing an _absence_--you have an extra closing tag, and I didn't propose it as a solution to your problem. — isherwood, Jan 19 '22 at 14:38

Lucie · Answer 1 · 2022-01-19T23:06:10.010

What about moving html tag to the end of paragraph?

$(document).ready(function() {
  $(window).trigger('resize');
});

$(window).resize(function() {
  divH = $('div').height();
  console.log(divH);
  newH = divH - 105;
  $('div  img').first().css({
    "height": newH + "px"
  })
});

.invisible {
  float: right;
}

.bottom {
  float: right;
  padding-left: 10px;
  padding-top: 0px;
}

div {
  max-width: 700px;
  margin: 0 auto;
  margin-top: 4em;
  text-align: justify;
}

p {
  text-align: justify;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="column-count: 2;">
  <img src="http://placekitten.com/100" class="invisible" width="0" height="206"></img>



  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem aspernatur ut impedit, quod, similique obcaecati velit sit distinctio ab, vitae labore, quibusdam excepturi iure maxime nihil tenetur dicta. Iure, dolor. Lorem ipsum dolor sit amet,
  consectetur adipisicing elit. Possimus adipisci, porro vitae perferendis similique ullam sint, aut labore! Similique rerum inventore dolor sint quae cupiditate repellat debitis saepe quia laboriosam! Lorem ipsum dolor sit amet, consectetur adipisicing
  elit. Perferendis autem in quaerat itaque, architecto deserunt inventore officiis laborum commodi, corporis quam dolorum labore optio earum unde adipisci impedit, sed sint! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut voluptatem rem
  in mollitia voluptatum laboriosam expedita, ut tempora blanditiis et tempore sapiente minima consequatur facere voluptatibus quibusdam ad sed velit vero nesciunt ipsa. Possimus impedit labore non cumque, culpa nam. Lorem ipsum dolor sit amet, consectetur
  adipisicing elit. Optio numquam, temporibus velit quas quod, aliquid iure, possimus molestiae laboriosam perspiciatis a iusto dignissimos magni suscipit officiis nesciunt. Sapiente corporis optio mollitia, enim temporibus dolore amet magni, at hic laboriosam
  atque beatae, quas eum, laudantium. Distinctio maxime commodi sunt quis soluta sequi labore ratione ad atque saepe cupiditate tempora ab numquam consectetur tenetur voluptatem inventore porro, ut obcaecati magnam culpa. Architecto consequuntur recusandae
  ut aperiam ullam harum officia maiores cumque cupiditate id.
  Modi, labore id dignissimos ducimus laborum temporibus pariatur, quae reprehenderit at tenetur mollitia, recusandae quas commodi quidem soluta repellat.
      <img src="http://placekitten.com/100" class="bottom" width="100" height="100"></img>
</div>

This solution is not suitable because the text does not flow around the image. — smallMars, Jan 21 '22 at 06:34
I checked simmilar questions on stackoverflow and [here](https://stackoverflow.com/questions/19770925/floating-an-image-to-the-bottom-right-with-text-wrapping-around) are two js solutions you could use. If you dont want to use js and your text will not change, I guess you could [move the picture in lines](https://stackoverflow.com/questions/44987648/how) of p. Its not nice clean solution, but comparing the energy and effect.. — Lucie, Jan 21 '22 at 11:52
Thanks, but there is no example that helped to solve the problem. — smallMars, Jan 21 '22 at 12:46

How to place image in column number two using the CSS column-count property?

1 Answers1