Overlap two Divs using float

Question

I need to create following page layout using Divs.

http://jsfiddle.net/6Lanq/ (please use horizontal and vertical scrollbar to see the exact picture. we have four zones)

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.

It is possible to do the same without using nested divs and exact coordinates? Some find of float or dynamic solution?

Answer 1

You'll have to use Position:Absolute, then, if you use Top and Left to set the position it will take the entire page, but if you use Margin-Top and Margin-Left, it will take as a reference the parent DIV.