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 (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.