I changed the display of all elements to inline-block, so as to pull them all into the same line. Then after attempting to float '.div2' and '.div3' seperately right, I placed them in a section and floated the section to the right, so that '.div3' did not end up to the left of '.div2'.
I reverted the display of all three Divs to block, so that they would stack on top of each other again. Then I used "margin: auto" to push '.div2' to the middle of the page. After that I used "float: right" on '.div3' to push the bottom div box to the right of the page.
I deleted the third Div box. Then I made the 1st Div box twice as large and dark grey. Then I nested the 2nd div box inside of the 1st Div box, and nested them both inside of a container, so that I could use the container to create a top margin for the boxes. After this I used margin-auto to center the two boxes on the page.
I set both Div boxes to position:absoulte so that they were stacked on top of each other in the top left corner. From there I just set a Margin on '.div2' so that it was pushed down and to the right on top of '.div1'.
This one took me a second. At first I tried the obvious, floating the ".div1" to the right whilst setting "margin: 0 auto" to the ".div2". After staring at my screen for a half hour I did some googling and found out a better way to accomplish the task without using "float". I then deleted the "float right" from my ".div1", and instead inserted a "margin-left: auto", which set everything up perfectly.
I started by pushing everything to the bottom right corner by using margin-left and margin-top on the ".div1", and then nesting both ".div2" and ".div3" inside of ".div1" so that came along for the ride. Then I used position: absolute on the nested Divs so that I could move them around within the large ".div1" box. I also made a container for all three div elements, so that none of them wandered off ouside of my grey ".div1" box. Finally I used offset on the "right" and "bottom" in the ".div2" and ".div3" so as to position them "absolutely" where I wanted them in the big grey ".div1" box.
This one was kind of interesting. At first I only applied "posititon absolute" to the ".div2" nested within the big grey box. Then I offset from the "left and top, 100px" to land it in the corner relative to the top left of the document. Instead of doing this though I ended up setting both Divs to absolute and then I changed the offset of ".div2" to right: 0 and bottom: 0, which moved it from the bottom right corner of the document, to the bottom right corner of the box, when I switched ".div1" from no position, to either position: relative or position:absloute.
I just took Challenge 7 and switched the offset on ".div2" from bottom to top.
For this challenge I started by making a large grey box, and nesting my two small black boxes inside. Then I offset the black boxes "left: 15%". From there I moved one box to the bottom using the "bottom offset," and the other box to the top using the top "offset." At this point the text of ".div1" was being hidden by the ".div2" box, so I just doubled the size of all the boxes so that the text would show. At this point my boxes were slightly off center, so I delted the "15%" offset on "left", and changed the value to "50px", which ceneted them perfectly.
This challenge took me awhile. The main challenge once I got the two small black boxes positioned within the large grey box, was to center the large grey box, and then to move the large grey box slight off the top of the page. In order to do this I set the large grey box to position relative, and used margin-auto to center the box. Then to move it off the top of the page I also added 15% of top margin to the big grey box.
For this challenge I started by making three boxes of different size and color. I moved the medium box into the bottom right corner of the large box using absolute position, and then I did the same for the small box inside of the medium box. Then I just used a 5% offset on the right and bottom border on the small box to move it out of the corner.
For this challenge I started by reusing the same tri-colored array of boxes from Challenge 11. I moved the black box halfway across the horizontal base of the large grey box, by setting its position to absolute, and offsetting it to the right "-150px". This pushed the box to the right 150px. Then I took the 3rd, small box, and again I used offsetting and position absolute. This time I pushed the box down 500px so that it was lined up with the bottom half of the black box, and then by pusing it to the right edge of the large grey box, i also placed it half way within the black box, thus solvingthe challenge.
This one really made me feel like a CSS wizard. I was able to make a rule for every box except for div 1, and set the margin to 50px so as to offset the first box halfway down and to the left just like the comp. After this, I started to next each box within each other, and as I repasted the closing div tags, all the boxes magically fell perfectly into place! It was a good feeling.
Very simply reused challenge 8 and offset Div1 to "right: 0;". Then moved div2 into the bottom right corner by switching its offsets to "left: 0%" , and "bottom: 0%".
I started by making 4 fresh Divs. Then I grouped the divs together in pairs, and made 1 pair large grey boxes, and the other pair small black boxes. Then I made the Div1 box inline-block, as well as the div2 box inline-block. This moved them both onto the top line together, where I used a margin-left of 100px to move the small box properly to the right.
I then moved the large grey box on the bottom (Div4) over to the right, and lined it up to the right side of the small black box (Div2). I did this also using a margin-left, of 200px, and -140px to the margin-top (margin: -140px 200px). I also shrunk the big boxes down from 200px to 175px sqaures, as I noticed that the comp was set up more like this. Finally, I matched the baseline of the 2nd small box, to the baseline of the 2nd big box. This was actually kind of a chore, I had to make some weird tweaks to stop it from dragging div4 down with it.
This method of going from 1 to 2 to 4 to 3 seemed the best way to estimate the space in between things.
I also noticed that it was very important for me to keep div3 as relative position because otherwise it broke everything.