Wrapping Text Around an Image with Indentation and Justify

Wrapping text around an image with indentation and justify

img {
    float: left;
    margin: 0 20px 20px 0;
}

p {
    text-align: justify;
    text-indent: 2em;
}

Here's the fiddle: http://jsfiddle.net/9VkQR/

Paragraph wont wrap around an image

Only inline elements flow around floated elements, but both the h1 and p tags are block elements. You can change both of their displays to inline-block however a better solution would probably be just to put the img inside the p tag with the text itself (since text has inline styling by default and will naturally flow around your floated image).

.container { width: 80%; margin: auto;}
#about { min-height: 500px; padding: 40px 100px;}
#about img { float: right;}

<section id="about"> <div class="container">   <h1>About</h1>   <p><img src="https://picsum.photos/250/250">Lorem ipsum dolor sit amet</p> </div></section>

Trying to wrap text around an image in Bootstrap 4

Are you looking for something like this -

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<section id="ourStory">
  <div class="container-fluid">
      <div>
        <div class="col-md-6 m-3">
          <img src="https://www.w3schools.com/css/img_mountains.jpg" class="img-fluid float-left mr-4" alt="stray dog lying down">
        </div>

        <!--column-->
        <div class="col-md-12">
          <h1>Our Story</h1>
          <p>Eget mi proin sed libero enim. Sit amet volutpat consequat mauris nunc congue nisi. Mattis ullamcorper velit sed ullamcorper. Tempor nec feugiat nisl pretium fusce id velit ut. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin
            libero. Diam donec adipiscing tristique risus nec. Gravida in fermentum et sollicitudin. Laoreet suspendisse interdum consectetur libero. Pellentesque massa placerat duis ultricies.<br><br> Bibendum neque egestas congue quisque egestas. Enim
            blandit volutpat maecenas volutpat. Urna porttitor rhoncus dolor purus. Ac turpis egestas sed tempus urna. Pellentesque id nibh tortor id aliquet lectus proin. Sit amet massa vitae tortor condimentum lacinia quis. Adipiscing elit ut aliquam
            purus sit amet luctus. Pellentesque dignissim enim sit amet venenatis urna cursus eget. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Quis lectus
            nulla at volutpat diam ut venenatis. Sed risus ultricies tristique nulla aliquet.<br><br> Tempor nec feugiat nisl pretium fusce id velit ut. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Diam donec adipiscing
            tristique risus nec. Gravida in fermentum et sollicitudin. Laoreet suspendisse interdum consectetur libero.<br><br> Tempor nec feugiat nisl pretium fusce id velit ut. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero.
            Diam donec adipiscing tristique risus nec. Gravida in fermentum et sollicitudin. Laoreet suspendisse interdum consectetur libero.
          </p>
        </div>
        <!--column-->
      </div>
      <!--row-->
    </div>
  <!--container-->
</section>

How can I indent text to avoid wrapping around an icon?

What i prefer to do is wrap the text after the icon & use this little float trick

<ul>
  <li>
      <i>Icon</i> <span>asdfasjfaksjdfa <br/> aksjdfkasjdfa</span>
  </li>
  <li>
      <i>Icon</i> <span>asdfasjfaksjdfa</span>
  </li>
  <li>
      <i>Icon</i> <span>asdfasjfaksjdfa</span>
  </li>
</ul>

i {
  float: left;
}

span {
  display: block;
  padding-left: 120px; // width of the icon
}

https://jsfiddle.net/aq9Laaew/290997/

CSS - make paragraph text wrap around image without float

This question seems to be concerned about the why over the how, so I'll focus on the inner-workings:

The Visual formatting model section of the CSS 2.1 spec describes inline formatting contexts:

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

The property they describe is vertical-align which takes a number of different values, baseline being the default. This is why your two inline elements appear as they do, by sitting on the baseline. You could change the  to vertical-align: top, and the top of the first line of text will align with the top of the image. However, you will still get a gap between the first line of text and the following lines.

This is because the text is rendering one line-box to the next, vertically. Regardless if the line-box of the first line is larger than the rest, it will still flow one line-box at a time. Here’s a visualization of this concept:

Sample Image

Another important concept in understanding this is that <img> is a replaced inline element, which means its appearance is constructed by an external resource outside of the document. replaced inline elements can take a height value, while so-called non-replaced inline (like a ) elements cannot. This is why <img> foo can behave differently than foo bar (because the image has an intrinsic height), even though they are all inline elements. Imagine setting the height of the image to the x-height of the text -- it would effectively render the same as your image, but in this case it behaves exactly as you would expect:

img {
  height: 10px;
  }

p { 
  display: inline;
  }

<div>
    <img src="http://placehold.it/100x100/E8117F/000.png">
    <p>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</p>
</div>

Justify wrapped text in html

Never, ever, "justify" text using (non breaking or other) spaces. Just use CSS properties for text-align, text-wrap etc. For more information check out CSS Text.

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

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>

Wrapping Text Around an Image with Indentation and Justify