CODEWITHSUNDEEP
htmlcss
Miguel Moura
Miguel Moura

Reputation: 39364

How to wrap text around image?

I have an paragraph and an image (See Example in CodePen):

<div>
  <p>
    Lorem ipsum dolor sit amet ...
    <img src="http://placehold.it/200x200"/>
  </p>
</div>

And the following CSS:

div {
  margin: 0 auto;
  width: 60%;
}
img {
  float: right;
  padding: 20px;
}

How can I wrap he text around the image?

I tried float:right but this does not seem to work.

Upvotes: 0

Views: 136

Answers (2)

j08691
j08691

Reputation: 207861

Place the image before the text:

<div><img src="http://placehold.it/200x200"/>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec eros enim. Donec et scelerisque nisl, nec luctus massa. Nullam ut laoreet sem. Sed ligula elit, auctor et sagittis facilisis, auctor in nulla. Nulla suscipit dignissim feugiat. Vivamus lacinia tellus elit, non bibendum purus tempus eget. Sed porttitor accumsan lacus, at aliquam nisi rutrum nec. Donec a dignissim tortor. Curabitur blandit non turpis tristique tincidunt. Sed dictum sem id sem lacinia mattis. Quisque pellentesque, sem sit amet auctor congue, enim lorem egestas nisi, sit amet accumsan turpis turpis et metus. Mauris pulvinar luctus felis, in feugiat dui vulputate ac. Sed faucibus libero nulla, placerat accumsan elit rutrum et. Maecenas id enim quis turpis pretium sollicitudin.
  </p>
</div>

codepen example

You're using float correctly with the image, but since in your original example the image is coming after the text, you don't notice the effect. By moving the image before the text, it gets floated to the right, and the text that comes after it is then allowed to float up alongside it.

Upvotes: 4

jmore009
jmore009

Reputation: 12923

put the image at the top

 <img src="http://placehold.it/200x200"/>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec eros enim...

Upvotes: 0

Related Questions