I placed div2 and div3 in a span that allowed me to display: inline-block and float: right the entire span so the divs didn't reverse their order when floated.
Because the divs do not share vertical space in the layout, they can stay as block elements and only have their horizontal alignment changed. So div2 is centered using margin: 0px auto; and div3 is aligned right using float: right.
By placing div2 within div1 I was able to have div2 overlap div1 and give them both margin: 0px auto; to center them horizontally. Then to have div2 center on div1 vertically, I modified it's margin attribute to margin: 30px auto;.
By making div2 a child of div1 I was able to set position: absolute to div2 and top: 50px left: 50px so div2 positions 50px to the right and down from div1.
Back to non-nested divs, I originally tried float: right on div1 but div2 moved up into the same row. Attempt two was more fruitful by using only margin properties. So div1 had zero margins all around except the left side (margin: 0px 0px 0px auto). div2 had auto on left and right, and div3 stayed where it was.
By containing div2 and div3 within div1, they stay positioned within div1 but can be moved around. So I applied position: absolute to div2 (with position: relative on div1) and set top to the pixel difference between the height of div1 and div2 so div2 would appear at the bottom of div1. Then div3 is float:right. To make all of the divs move to the bottom of the window, I set margin: 385px 0px 0px auto;.
to be continued...