I simply used a float: right for div1 and div2. Once those 2 elements were on the left side, a margin-left: 10px was used on div2 in order to give them some breathing room!
I set each div to a display: block in order to get them to be on seperate lines. On div2, I used a position: center and margin: auto to align it to the center. Lastly, I used a float: right on div3!
I set both divs at a position of absolute which allows them to position on top of each other (layered). Then I made div1 twice as big (200px). Then the size of div2 (100px) made it easy to fit in the middle of div2 with a margin of 50px. Lastly, I set the margin of the container that wraps both divs to 0 (t/b) and 40% (l/r) to center them.
I set both divs at a position of absolute which allows them to position on top of each other (layered). Then I changed div1 back to 100px to match div2. With a margin of 50px on div2, they match the comp.
I learned that each element is set to display: block by default. On div2, I used a position: center and margin: auto to align it to the center. Lastly, I used a margin: 0 91% on div1 in order to send it to the right.
I set all divs positions to absolute. After setting div1s size to be larger, I then did some math for div 2 and 3 to move them into respective positions. Then I wrapped all divs in a container and moved them to the bottom right by setting top and right margin to 100%.
I set the top and right margins on div2 to 100px in order to send it to the bottom right corner of div 1 block, which was set to a new width and height of 200px, twice the size of div2.
From the same layout as challenge 7, I set the margin on div 2 to have a right margin of 100px to push it into the top right corner of div1.
I made div1 bigger and gave its position: absolute. I set both div2 and div3 to have a left margin of 40px, which centers them on the width of div1 of 180. Then I pushed div3 down to the bottom of div1 by div1 height - div3 height with a top margin of 200px.
I made div1 bigger and gave its position: absolute, this time with a larger width. I set both div2 and div3 to have a top margin of 40px, which centers them on the height of div1 of 360. Then I pushed div3 right on div1 by doing some math and using the left margin.
I set div1 to have be taller than wide. Then I did math for the margins on div2 and div3 to place them at the bottom right corner on top of div1. I used a 10px buffer for div3 on top of div2.
I used the same layout as challenge 11, except I moved div2 and div3 down and to the right respectively to give them even sides where the center of the block is the edge of the larger one(s).
I used a similar layout to challenge 4, but added 3 more divs, 5 total. Then I simply increased the margin of each consecutive div by 50px to move them diagonally down and to the right.
I used a similar layout to challenge 8. This time I set the margin-left of the wrapping container to 100% in order to send both div1 and div2 to the right side of the page. Then I changed the left and top margins of div2 to place it accordingly.
I made a copy of div 1 to make div 4, and made a copy of div 2 to make div 3. Then I poisitioned them with margin by pixels to send them over to their respective places.