I first made three 100x100 divs and displayed them as inline blocks. I floated div1 left and div3 right and then positioned div 2 as absolute and pushed it 120px from the right. I also centered my text vertically and horizontally within my div boxes as it looks neato that way.
I used the same basic strategy as I did in challenge one. Here, however, I pushed div 2 100px from the top and set its margin as 0 auto, effectively centering it in the page. I floated div 3 to the right.
Here, I made two div classes: innie and outie. I nested innie within outie. I centered my outie then pushed it down a bit using margin: 30px auto. I then position absolute-ed my innie and then centered it within outie using margin: 75px auto; I sized it using height: 50% and width 50%. Then I gave them both a super clean navy/indigo vibe.
I fixed div1 to the top left corner then I absoluted div2 50px from the top then 50px from the left.
I pushed div 1 to the right using float right. I cleared the float with div2 and then centered div 2 using margin 0 auto. Then, I floated div 3 to the left. Happy little forest green boxes.
3 divs. I nested 2 and 3 within 1 to make the overall structure. I fixed div1 to the bottom right corner of the screen and made it large enough to contain the other two divs (300x700). I hit div2 with a position: absolute then fixed it to the top right corner of div1 container using top: 0 and right: 0. I did the same with div3 but fixed it to the bottom left using bottom: 0 and left: 0.
I nested div2 within div1 and used position: fixed to put div1 in the top left corner. Then I used position: absolute and bottom: 0 right: 0 on div2 to put it in the bottom left corner of the div1 box.
I pretty much recycled the code from challenge 7 for challenge 8. However, here, in order to put div2 in the top right corner of div 1, i used position: absolute and put it at top: 0 right: 0. I also used a quite pleasing turquoise color scheme.
I made div1 a container with a position: fixed, top: 0 left: 0, then nested div2 and div3 within it. div2 and div3 got a position: relative and then were pushed 75px from the left. div3 was anchored to the bottom using bottom: 0 and div 2 was anchored to the top using top: 0.
This one gave me some grief. Ultimately, I nested div2 and div3 within div1 and gave div1 a position relative and div2 and div3 a position absolute. I centered the containing div and then pushed it down a bit using margin: 30px auto. I positioned div2 using top: 25px; and left 25px; and div3 using right:25px and top: 25px. The end result, rorschach style, is a pair of creepy green robot eyes.
Here I made a div within a div within a div. Divception. I made div1 and then nested div2 inside of it and then nested div3 inside of div 2. I then gave each div their proper dimensions, position: fix-ed div 1 into the top left corner. I position: absolute-ed div 2 and put it in div1's bottom left corner. Then I position: absolute-ed div3 in div2's bottom left corner and consequently bumped it a few pixels up from the bottom and a few pixels left.
All these divs are using position: fixed. I'm sure theres a better way to make this happen. I fixed div1 to the top left corner. I fixed div2 to where it is using some math action for the top: and left: keys. Same with div3.
I made 5 divs and gave made them 100x100. All are displayed as inline: block elements. All have position: relative. I moved each block down and over from the previous one by tinkering with their top: and left: attributes. Lots of trial and error. Also gave them an aesthetically pleasing ascending blue color scheme with inverted font colors. It eased the frustration of building this thing.
Nested div 2 within div1. Shipped div1 to the top right corner using position: fixed and top: 0 and right: 0. Div2 got a position: absolute and was shipped to the bottom right corner of div1 using bottom: 0 and left: 0.
This challenge caused me hardship. I made a container div and threw a 2px solid border on it so that I could conceptualize the space that would be taken up. I then nested 4 divs within this container div. All nested divs were gifted absolute positions. div pairs: 1 and 4, 2 and 3 received the same dimensions. Div1 was sent to the top of the container using top: 0 and left: 0. Div4 was sent to the bottom right using bottom:0 and right:0. Div2 went to the top right and div3 to the bottom left.