Question

This is easier to show than explain: http://jsfiddle.net/gN4VZ/

Is it possible to have my right-floated content (blue) overlap my left-floated content (red) instead of stack below it when the two combine to exceed the container width?

Answer 1

You could use absolute positioning.

Instead of

float: right

use:

position: absolute;
right: 0;

and instead of

float: left

use:

position: absolute;
left: 0;

Be sure to set position: relative; on your parent divs so that the absolute positioning is relative to their respective containers instead of the page.