CSS: Make two floating elements overlap

Question

I have two divs within a container. One floats left and one floats right. Both are about 60% as wide as the container and are designed such that they overlap in the middle (

Answer 1

Use a negative margin-right on the left box so that the right box is allowed to overlap:

#left {
    width: 250px;
    border: 1px solid #ccc;
    display: inline;
    float: left;
    margin-right:-104px;
}

The 104 pixels is the overlap amount plus 4px for borders.

Here's a jsfiddle.