Floated div 1 to the left. Put divs 2 and 3 into a container and set their display as inline block, so that they can be contained in the same line/block. Floated the container with divs 2 and 3 to the right. Challenge 1
Challenge 2 Since none of these boxes need to move out of their natural blocks in the page flow, aligning them can be accompilshed simply using margins to push div 1 all the way to the left, div 2 directly centered, and to push div 3 all the way to the right.
Challenge 3 Div 2 is nested within div 1. Because of this nesting, div 2 will move to the center of the page inside div 1 with an auto margin. Div 2 is "centered" within div 3, using margins set with a specific px amount from the top and from the left of the edge of div 1.
Challenge 4 Div 1 sits in its natural position in the page flow, but I put an auto margin-right on it. (Is this necessary/good practice?) Div 2 must be positioned absolutely, because it must come out of the natural page flow to appear to be laying over div 1.
[Challenge 5]
Challenge 6 Divs 2 & 3 are nested in div 1 in the HTML, so these elements will move with div 1 when it is pushed down the page 200px with a margin top and all the way to the right of the page with an auto margin-left. However...even though they move with that box, it seems I still have to set their top margins to be from to the top of the browser viewing screen, not from the top of the box they are contained in..
Div 2 is nested within div 1 in the html, and then set in an aboslute position with offsets of zero on the right and the bottom, moving div 2 to the bottom right of div 1. Challenge 7
Exactly like Challenge 7, except div 2 is moved to the top right, once again using offsets of zero. Challenge 8
Divs 2 and 3 are nested within div 1. 2 & 3 are positioned absolutely, while 1 is relative. div 2 is set at the top of div 1 using top: 0, 3 is at the bottom using bottom: 0. They both appear horizontally centered, using left offsets of 50px.. (this same effect could be achieved using right offsets.) Challenge 9
Divs 2 and 3 are again nested within div 1. 2 & 3 are absolute; 1 is their relative. 1 is centered horizontally using an auto margin and is moved 50 px from the top of the view screen. Both 2 and 3 are set 50 px from the top line of the div 1 box, and are set 50px from the left and right, respectively. Challenge 10
Divs 2 and 3 are again nested within div 1. 2 & 3 are absolute; 1 is their relative. Div 1 begins in the top of the page by its natural flow in the page, and it's pushed all the way to the left with an auto margin on the right. Div 2 is positioned in the bottom right of div 1 using bottom and right offsets of 0. Div 3 is positioned 15 px from both the bottom and right of div 1. Challenge 11
Same elements as Challenge 11. Both 2 and 3 remain absolute to relative 1. However, divs 2 and 3 must be pulled "outside" of div 1, using negative offsets. Challenge 12
1, 3, and 5 can be left as relative, because they can remain as block elements in the natural page flow set a certain amount from there natural position along the left of the page using margins. Challenge 13
Div 2 is nested within div 1. Both are moved to the far right of the page by putting an auto left margin on div 1. div 2 is positioned in the bottom left corner of div 1 using bottom and left offsets of 0px. Challenge 14