'Is it possible to float an image if it comes after the text in the html?

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?

css


Solution 1:[1]

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.

Solution 2:[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 CBroe
Solution 2 Maik Lowrey

Related Questions