Getting left and right floats to overlap instead of stack

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/