Wrap text around a div like in Word

Question

I would like to have achieve the following:

I want a block-element (div/img) in the middle of the screen and it should be surrounded by text like this:

I know this functionality exists eg in M$ Word. Is there a way to do this with Web technologies (HTML, CSS, JS) too?

The specifics are not as important for my use case, as I want to surround the image with a word-cloud, therefore I don't mind if the text to the left and right is actually in columns rather than in lines.

Answer 1

This is kind of a brute force solution, but might give you an idea.

 html, body { height: 100%; text-align: justify; } .text:after { content: "Lorem ipsum drbi posuert, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper noLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper noLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper noLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesqu adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper noLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper noLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper non"; } .left, .right { width: 33%; display: inline-block; height: 200px; overflow: hidden; } img { width: 31%; max-height: 200px; } 

 <div class="text"></div> <div class="text left"></div> <img src="https://i.stack.imgur.com/bVAmG.gif"> <div class="text right"></div> <div class="text"></div>