Come posso avvolgere il testo attorno a elementi impilati (es. Elementi con margini negativi)?

Question

Spero che qualcuno possa aiutarmi con questo.

Vorrei disporre il testo attorno a più elementi mobili impilati, tuttavia quando sto aggiungendo un margine negativo al secondo elemento il testo non giocare a palla (vedi sotto) ...

Qualcuno ha una soluzione che può aiutarmi con questo?

Grazie in anticipo!

Quello che ho fatto finora qui:

<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> 

Come vorrei la pagina per guardare

Come la pagina sembra come è

Answer 1

Spero che questo aiuti .

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

In breve, ho messo il margine negativo in basso all'elemento blu, quindi l'elemento rosso è salito. Poi all'elemento rosso ho dato una posizione margin-right, relativa: relativa e negativa a destra.