title: Overlap two Divs using float
body: <p>I need to create following page layout using Divs.</p>
  
  <p><a href="http://jsfiddle.net/6Lanq/" rel="nofollow">http://jsfiddle.net/6Lanq/</a> (please use horizontal and vertical scrollbar to see the exact picture. we have four zones)</p>
  
  <p>I accomplished it using nested divs and float but nested divs are not what is required. Other way of doing, that I know, is declaring "position:absolute" and setting z-index but this required exact top / right / bottom / left locations which are not desired.</p>
  
  <p>It is possible to do the same without using nested divs and exact coordinates? Some find of float or dynamic solution?</p>