CODEWITHSUNDEEP
htmlcss
Jesse Martinez
Jesse Martinez

Reputation: 21

Make part of a paragraph wrap above a floated image

Text Wrap How do I get part of a paragraph to wrap above an image like in that sunflower picture?

If I make the image relative and use top, the image will still occupy the space and the text won't wrap above. If I keep the position static and use margin-top, then it also won't wrap.

Example here:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: right;
}
</style>
</head>
<body>

<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p>

<p><img src="https://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body>
</html>

How would I move the pineapple image down while having the first three wrapping above the pineapple image?

float: right;
position: relative;
top: 60px;

Doesn't work and

float: right;
margin-top: 60px;

doesn't work.

Upvotes: 2

Views: 49

Answers (2)

Yoarthur
Yoarthur

Reputation: 917

If you want an effect like first image, using clip-path css property might do the trick.

You can use http://bennettfeely.com/clippy/. An online tool to handle clip-path.

Using clip-path allow you to create custom and very visual dramatic eye pleased layouts for wrapping images with paragraphs.

Jen Simmons explain it in a marvelous way in her channel.

https://www.youtube.com/watch?v=pOB75oTNhw0

All her videos are treasures.

Upvotes: 0

Ryan
Ryan

Reputation: 579

In relation to that example from W3Schools, just put your image element at the most ideal position within your paragraph tag.

See the code example below, and the results that it gets. You may have to experiment with the placement of the img tag to get the exact results that you're looking for, but it's a starting point.

img {
  float: right;
}
<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. <img src="https://via.placeholder.com/150" />Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

Upvotes: 1

Related Questions