Getting left and right floats to overlap instead of stack

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.

Answer 2

Use absolute positioning with the .box class set to position:relative.

http://jsfiddle.net/gN4VZ/1/

Note that I had to set a height on each .box so that it wouldnt overlap top/bottom.

your new CSS would be

.bar {
    border:solid 1px black;
    color:white;
    position:relative;
    height:40px;
}
.clear {
    clear:both;
}
.left-bar {
    background:red;
    height:40px;
    position:absolute;
    left:0;
}
.right-bar {
    background:blue;
    position:absolute;
    right:0;
    height:40px;
}​

---

as suggested by My Head Hurts, you could just position the right one, which eliminates the need for the height on the outer div.

http://jsfiddle.net/gN4VZ/2/