CSS Layout Challenges

css_layout.md

Challenge 1

I added a 3rd div, floated div2 and div3 right, and floated div1 left.

Challenge 1

Challenge 2

I made div1 and div2 block elements, and centered div2 using margin: auto;. Then I floated div3 right.

Challenge 2

Challenge 3

I expanded div1 too 200px, centered both divs with margin: auto;, and used relative positioning on div2 to move it on top of div1.

Challenge 3

Challenge 4

I switched colors, made both divs block elements and used relative positioning to move div2 to the right place.

Challenge 4

Challenge 5

I messed this up and copied over challenge 6. Come back to this one... I floated div1 right and then used a clearfix on div2.

Challenge 5

Challenge 6

I positioned all divs using absolute positioning, and placed div2 and div3 within div1.

Challenge 6

Challenge 7

I used absolute positioning again. div2 is inside div1.

Challenge 7

Challenge 8

Same as challenge 7.

Challenge 8

Challenge 9

I used absolute positioning on div1, then centered div2 using margin: auto; and pulled it up using relative positioning. div3 was positioned using absolute positioning.

Challenge 9

Challenge 10

I put div1 in the center with display: block; and margin: auto, and used padding to bring it's child elements, div2 and div3 into the middle.

Challenge 10

Challenge 11

I hate that I've used absolute positioning several times because I've never really used it before it seems a bit hackish. Regardless, that's what I did here with div2 and div3.

Challenge 11

Challenge 12

I did it the same way as challenge 11 but used some negative numbers on the absolute positioning.

Challenge 12

Challenge 13

I

Challenge 13

Challenge 14

I

Challenge 14

Challenge 15

I

Challenge 15