CSS Challenge Warmups

css-warmups

##### Challenge 1

I did not hardcode position the first div because it will land in top left by default. I made a separate div to contain the other two and positioned it absolutely to the top right of the page. I made it big enough to hold the two original divs with some space in between. I floated divs two and three left and right respectively. I did it this way because I thought the page would be more responsive, and it will keep divs 2 and 3 from overlapping as the page changes sizes.

[Challenge 1](https://codepen.io/lolakoala/pen/dRqKwr)


##### Challenge 2

I did not hardcode position the first div because it will land in top left by default. I positioned the other two divs absolutely. The top position is in pixels so that they will always line up vertically no matter how big or small the page is. The left/right position is in a percentage so that they will all maintain their horizontal position in relation to each other no matter how the page is sized.

[Challenge 2](https://codepen.io/lolakoala/pen/weExKg)


##### Challenge 3

I positioned div1 as relative and div2 as absolute so that div2 would always be centered horizontally and vertically within div 1. I used margins to position div1 centered horizontally and at a fixed position from the top. I could not figure out how to keep div1 centered on the page if it shrinks or grows.

[Challenge 3](https://codepen.io/lolakoala/pen/MoqBjG)

##### Challenge 4

I did not hardcode position the first div because it will land in top left by default. I positioned div2 as absolute with px increments from top and left so it would be fixed with respect to div1.

[Challenge 4](https://codepen.io/lolakoala/pen/qjMMVr)

##### Challenge 5

I created a parent div and set its position relative so that the three baby divs had something to be positioned absolutely to. I used percentages to position the right and left most divs. I used margins to position the center div. No matter what size the page is, the divs will stay put relativet to their parent div. 

[Challenge 5](https://codepen.io/lolakoala/pen/owPPqe)

##### Challenge 6

Div 1 is the parent to div 2 and 3. I positioned it absolutely to the body at 0% bottom and right to keep it on the bottom right of the page. I floated div 2 right to keep it on the far right. I gave div 3 a top margin to push it down to the bottom of div 1, and it defaulted to the left of div 1. 

[Challenge 6](https://codepen.io/lolakoala/pen/jwvvRO)

##### Challenge 7

Div 1 is the parent to div 2. Div 1 is positioned relatively and div 2 absolutley so that div 2 can be pushed to the bottom right of div 1 w/ 0% positioning. 

[Challenge 7](https://codepen.io/lolakoala/pen/jwveEP)

##### Challenge 8

Div 1 is the parent to div 2. Div 1 defaults to the top left of the page. I used float: right on div 2 because it positioned it to the upper right of div 1 with the least amount of code and without needing to absolutely position anything.

[Challenge 8](https://codepen.io/lolakoala/pen/XgorBN)

##### Challenge 9

As the first element on the page, div1 will naturally stay at top left. I set display:flex on div1, flex-direction:column so the contents (the black divs) would align vertically. 
I centered them and separated them with align-items: center; and justify-content: space-between.

[Challenge 9](https://codepen.io/lolakoala/pen/mwYaGo)


##### Challenge 10

I put display: flex and justify-content: center to center the big div on the page. I used justify-content: space-around to position the smaller black divs.
I added a top margin to the large div to give some white space above it.

[Challenge 10](https://codepen.io/lolakoala/pen/gRJZyV)

##### Challenge 11

I made the large div position:relative and positioned the other two divs absolutely from the bottom right corner.

[Challenge 11](https://codepen.io/lolakoala/pen/pwmGjw)

##### Challenge 12

I made the large div position:relative and positioned the other two divs absolutely to get them to overlap each other. I had to use negative positioning
to get them to drop below each other.

[Challenge 12](https://codepen.io/lolakoala/pen/NgVogp)

##### Challenge 13

I positioned each div absolutely, adding 100px to top and left positioning each time to get them to stagger.

[Challenge 13](https://codepen.io/lolakoala/pen/gRJyXE)

##### Challenge 14

I positioned each div absolutely. I was also able to get them where I wanted with flex properties, but the text was appearing in weird places.

[Challenge 14](https://codepen.io/lolakoala/pen/LLovaJ)

##### Challenge 15

I put the divs in two separate sections, divided by columns. I made the body display: flex to make the columns sit next the each other, 
and then I used flex properties to make the divs line up vertically. I used align-items: flex-end to make the right hand column align 
on the right side. 

[Challenge 14](https://codepen.io/lolakoala/pen/NgVVPr)