I added the element div3 and added float: right; to .div2 and .div3. position: relative; .div2 and .div3.
.div1 kept float: left;. I changed .div2 to float: center; margin: 0px auto; postion: relative; top: 100px; and .div2 to float: right; margin-top: 100px;.
.div1 margin: 0px auto;, expanded width and height, changed background color. .div2 just got margin: 25px auto;, I also nested the div2 inside div1.
.div2 received postion: absolute; with a top and right set to 50px and background-color changed to grey.
.div1 gets float: right; to force it to the right. .div2 gets margin: 0px auto; and position: relative; top: 100px; to put it in the middle and push it down. I added a .div3 which is floated left and a top margin of 100px to push it down
Gave .div1 grey background color and expanded the width and height to make a rectangle. float: right; and position: relative; added to top: 400px; to push it down. nested div2 and div3 inside div1. .div2 floated left and position absolute with top: 70px; to push it down. .div3 gets float right.
.div1 gets expanded height and width to 200px each. background color grey. removed float. nested .div2 inside .div1. .div2 gets float: left; position: relative; top: 100px; to stick it to the bottom left corner of .div1
same .div1 properties as challenge 7. removed the position relative and top on .div2. kept floated right.
gave .div1 a grey background, float: left;, changed height and width to make it a tall rectangle. nested div2 and div3 inside div1. .div2 and .div3 get margin: 0px auto; to center them and position relative to move them up or down. .div2 gets a value for bottom to push it upwards and .div3 gets a value for top to push it down
divs 2 and 3 are nested in div1. div1 gets expanded to a horizontal rectangle and given a grey color, it also gets margin: 50px auto. div2 and .div3 get position relative and display inline-block. div3 is floated right. div2 gets top: 35 and margin 0px auto and div3 just gets top:35 and right:35 to center it with div2.