3

Floating an image to the right making text wrap around it is easy if the image comes before the text in the html. But can it be done if the image comes after the text? Like this:

<div class="text">Lorem ipsum</div>
<img src='...' alt=''>

See JsFiddle - how can the image be floated to the right of the text in such a case where I'm unable to change the html?

Meek
  • 3,086
  • 9
  • 38
  • 64
  • Does this answer your question? [Wrapping text around an image with indentation and justify](https://stackoverflow.com/questions/15209389/wrapping-text-around-an-image-with-indentation-and-justify) – Sfili_81 Jan 27 '22 at 11:11
  • 1
    That's not possible. `float` specifies how the content _following_ the element you applied it to, behaves. If you just want the image on the right, text on the left (without the text actually _floating_ around the image, meaning going below the image as soon as there's space), then use flexbox. – CBroe Jan 27 '22 at 11:15
  • @CBroe Ok, I was suspecting this. If you create an answer, I will accept it. Thank you very much for your time. – Meek Jan 27 '22 at 11:22
  • if your image has a known size then it's possible. let me know if you want the answer in this case – Temani Afif Jan 27 '22 at 12:04
  • @TemaniAfif Yes, please. – Meek Jan 27 '22 at 12:36

3 Answers3

0

But can it be done if the image comes after the text?

No, that's not possible. float specifies how the content following the element you applied it to, behaves.

If you just want the image on the right, text on the left (without the text actually floating around the image, meaning going below the image as soon as there's space), then use flexbox.

CBroe
  • 91,630
  • 14
  • 92
  • 150
0

In your HTML structure you can add the display flex propertie to your class .not-working.

.not-working {
  display: flex;
}
img {  
  float: right;
  height: 150px;
}

hr {
  clear: both;
}
<div class="not-working">
  <div class="text"><strong>How can this image be right aligned with the text like below?</strong> Bacon ipsum dolor amet jerky buffalo flank short loin, porchetta shoulder ham meatball sausage venison pork. Beef ribs short ribs frankfurter flank kielbasa pastrami burgdoggen sirloin alcatra chislic. Fatback ham short ribs doner, ham hock pork belly pig tongue spare ribs. Beef ribs strip steak drumstick beef porchetta. Cupim tenderloin pork chop, beef buffalo ham sirloin prosciutto jowl alcatra. Chuck biltong pancetta, landjaeger cow drumstick corned beef alcatra pork sirloin ribeye turkey pork chop cupim. Pastrami cow sausage jerky andouille fatback. Venison biltong picanha turkey, salami spare ribs buffalo porchetta leberkas sausage. Pork ball tip andouille doner burgdoggen hamburger cow sirloin meatball leberkas. Ground round prosciutto chislic turkey biltong rump strip steak fatback chicken bacon shank. Rump fatback venison jowl spare ribs.</div>
  <img src='https://images.unsplash.com/photo-1613535449480-bb56b88d1886?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzgwNzU4MA&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>

<hr>

<div class="working">
  <img src='https://images.unsplash.com/photo-1613535449480-bb56b88d1886?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzgwNzU4MA&ixlib=rb-1.2.1&q=80&w=400' alt=''>
  <div class="text">Bacon ipsum dolor amet jerky buffalo flank short loin, porchetta shoulder ham meatball sausage venison pork. Beef ribs short ribs frankfurter flank kielbasa pastrami burgdoggen sirloin alcatra chislic. Fatback ham short ribs doner, ham hock pork belly pig tongue spare ribs. Beef ribs strip steak drumstick beef porchetta. Cupim tenderloin pork chop, beef buffalo ham sirloin prosciutto jowl alcatra.
    Chuck biltong pancetta, landjaeger cow drumstick corned beef alcatra pork sirloin ribeye turkey pork chop cupim. Pastrami cow sausage jerky andouille fatback. Venison biltong picanha turkey, salami spare ribs buffalo porchetta leberkas sausage. Pork ball tip andouille doner burgdoggen hamburger cow sirloin meatball leberkas. Ground round prosciutto chislic turkey biltong rump strip steak fatback chicken bacon shank. Rump fatback venison jowl spare ribs.</div>
</div>
Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
  • Yes, I know, thanks. But with this solution the text is not wrapping around the image. – Meek Jan 27 '22 at 11:55
0

With some hacks and if the image size is known, you can do it:

.box {
  overflow: auto;
  position: relative;
  border: 1px solid;
}

/* a fake float element */
.text:before {
  content: "";
  float: right;
  height: 150px; /* height of the image */
  aspect-ratio: 3/2; /* ratio of the image*/
}
/**/
/* the image on the top of the fake float element */
img {
  position: absolute;
  top: 0;
  right: 0;
  height: 150px;
}
<div class="box">
  <div class="text"><strong>How can this image be right aligned with the text like below?</strong> Bacon ipsum dolor amet jerky buffalo flank short loin, porchetta shoulder ham meatball sausage venison pork. Beef ribs short ribs frankfurter flank kielbasa pastrami burgdoggen sirloin alcatra chislic. Fatback ham short ribs doner, ham hock pork belly pig tongue spare ribs. Beef ribs strip steak drumstick beef porchetta. Cupim tenderloin pork chop, beef buffalo ham sirloin prosciutto jowl alcatra. Chuck biltong pancetta, landjaeger cow drumstick corned beef alcatra pork sirloin ribeye turkey pork chop cupim. Pastrami cow sausage jerky andouille fatback. Venison biltong picanha turkey, salami spare ribs buffalo porchetta leberkas sausage. Pork ball tip andouille doner burgdoggen hamburger cow sirloin meatball leberkas. Ground round prosciutto chislic turkey biltong rump strip steak fatback chicken bacon shank. Rump fatback venison jowl spare ribs.</div>
  <img src='https://images.unsplash.com/photo-1613535449480-bb56b88d1886?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzgwNzU4MA&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>


<div class="box">
  <img src='https://images.unsplash.com/photo-1613535449480-bb56b88d1886?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzgwNzU4MA&ixlib=rb-1.2.1&q=80&w=400' alt=''>
  <div class="text">Bacon ipsum dolor amet jerky buffalo flank short loin, porchetta shoulder ham meatball sausage venison pork. Beef ribs short ribs frankfurter flank kielbasa pastrami burgdoggen sirloin alcatra chislic. Fatback ham short ribs doner, ham hock pork belly pig tongue spare ribs. Beef ribs strip steak drumstick beef porchetta. Cupim tenderloin pork chop, beef buffalo ham sirloin prosciutto jowl alcatra.
    Chuck biltong pancetta, landjaeger cow drumstick corned beef alcatra pork sirloin ribeye turkey pork chop cupim. Pastrami cow sausage jerky andouille fatback. Venison biltong picanha turkey, salami spare ribs buffalo porchetta leberkas sausage. Pork ball tip andouille doner burgdoggen hamburger cow sirloin meatball leberkas. Ground round prosciutto chislic turkey biltong rump strip steak fatback chicken bacon shank. Rump fatback venison jowl spare ribs.</div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415