Stacking div over floating div without content wrapping?

Question

I have one element (a div) floating to the right of content, and below the content (which can be varying in height) I have another div that I want to stack above the floated right div, but stay below the content.

Here's an example: https://jsfiddle.net/8nap0qm6/

While this is close, I need the content within the ".over" div to not wrap when it hits that right-hand div, but instead fill up the whole ".over" div while still overlapping the right-hand div.

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

I know I could absolute position the over div:

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

but I need it to be vertically controlled by the content so I can't put a set "top" on it.

Is there a way to achieve this? (Make white text in blue box go full width of blue box.) I'm open to using completely different code if necessary.

Answer 1

You just need to set position: absolute;

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

JSFiddle

Answer 2

As the given answers don't seem to satisfy exactly what's expected, I decided to change some things to make the output closer to what you expect. Check my fiddle.

Major changes:

1) Added a #parent div to wrap the whole content

2) Absolutely positioned the .right div, relative to #parent

3) Added width to .right and all #parent's p elements so that summing both results in 100%