html - Stacking div over floating div without content wrapping? -

i have 1 element (a div) floating right of content, , below content (which can varying in height) have div want stack above floated right div, stay below content.

here's example: https://jsfiddle.net/8nap0qm6/

while close, need content within ".over" div not wrap when hits right-hand div, instead fill whole ".over" div while still overlapping right-hand div.

putting "clear: both/left" on ".over" div pushes div below right-hand div instead of overlapping it.

i know absolute position on div:

.over {     position: absolute;     top: 200px; // or xx%     left: 0px;     z-index: 5; } 

but need vertically controlled content can't put set "top" on it.

is there way achieve this? (make white text in blue box go full width of blue box.) i'm open using different code if necessary.

you need set position: absolute;

.over { position: absolute; z-index: 5; } 

jsfiddle