How can I wrap text around stacked elements (i.e. elements with negative margins)?

Question

I hope someone helps me with this.

I would like to wrap the text around several multi-level floating-point elements, however, when I add a negative margin to the second element, the text does not play the ball (see below) ...

Does anyone have a solution that can help me?

Thanks in advance!

What i have done so far here:

<style> .elements { float:left; padding:10px; width:50%; background:#039; color:#fff; font-family:Arial, Helvetica, sans-serif; color:#fff; padding:50px; box-sizing:border-box; margin-right: 20px; position: relative; } #element-two { margin-top:-50px; background:#900; margin-left:30px; } </style> <div id="post"> <div id="element-one" class="elements">Element 1</div> <div id="element-two" class="elements">Element 2</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id dictum odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus vitae leo dictum, <br> <br> <br> porttitor augue ut, accumsan nunc. Phasellus at malesuada orci, quis varius nulla. Nullam dui purus, elementum non fermentum eu, laoreet ac massa. Maecenas dictum elit sit amet mi pretium tincidunt. Maecenas interdum elementum lectus, eu aliquam nibh lacinia nec. <br><br><br> Quisque facilisis accumsan blandit. Mauris eget pulvinar lacus. Donec pretium posuere mattis. Suspendisse et tempor orci, sit amet placerat neque. Etiam laoreet massa eu libero posuere, sit amet laoreet metus auctor. </div> 

How I would like the page to look

What the page looks like, how it looks

Answer 1

Hope this helps.

  `https://jsfiddle.net/0zf7rxpn/1/` 

In short, I placed the negative edge-edge in the blue element, so the red element rose. Then to the red element I gave some margin-right, position: relative and negative right.