Align Text to The Right of an Image && Text Doesn't Wrap Around The Image

Text won't wrap around image flexbox

I made an adjustment to your CSS for article and .article home. Width has to be defined for article_home. Then it will work.

  /* Article Styling Definitions */
  article {
      /* display: flex; */
      /* flex: 3; */
      background-color: transparent;
  }

  .article_home {
      /* display: flex; */
      float: none;
      width: 1000px;
  }

Output:

Text won't wrap around image

It sounds like - from your comment above - the image of the individual is actually part of the background of the larger element. I would strongly encourage you to avoid this approach, and instead use a real image in the document itself. Not only is this more structurally sound and semantically proper, it also allows you to simply float the media content, and achieve your desired result:

<section>
    <figure>
        <image alt="Sample Photo" src="http://placehold.it/200x200/"/>
    </figure>
    <h1>Lorem ipsum dolor et sit</h1>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Integer purus leo...</p>
</section>

And then simply float the figure:

figure {
    float: left;
}

Results: http://jsfiddle.net/jonathansampson/quh1502x/

Paragraph's won't wrap around image

It's because the image is below the text. Text after the right floated image would flow around the image. Text that proceeds it has already been laid out and is not affected by later content.

Move the image up above the text to see the desired layout.

How to stop text from wrapping around an image?

I've found the issue. The "float: left" (css style) on the img was causing the problem. The way I found out was simply by checking each and every style attribute in your css by turning it on and off. So, delete the float: left line in your css and the problem will be fixed.

P.S. I like your site project :).

Vertically align text next to an image?

Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>

---

Related Topics