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 (right div takes priority).

How do I get them to overlap rather than stack vertically like floating elements usually do? If I absoultely position the right element the containing div doesn’t expand to fit the content.

Code (unfortunately I cannot jsfiddle this as their servers are read only atm):

<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

#container {
    width: 400px;
    background-color: #eee;
}

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

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

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.