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

Excellent Solution: http://jsfiddle.net/A9Ap7/237/

So, dont use:

  MARGIN-LEFT:100px...

== or similar commands.
The problem is that, if the left elements size is changed, if window is resized or etc,,, then it will make you problems! so, dont use such custom dirty "tricks", but make a normal structure inside html, so they should be naturally ordered.