CSS Layout Challenges

CSS Layout Challenges

# Challenge 1

I created three divs and floated div1 left, and div2 and div3 right. Then I switched the order of div 2 and 3 in my HTML to get div2 to show before div3. Then I put a small margin-left on to create the space between them.

[Challenge 1] (https://codepen.io/cdallava/pen/qPowMx)

## Challenge 2

I created three divs. I floated div1 and div2 left, and floated div3 right. Then I used margin-top and margin-left on div2 to center the box and push the div down from the top and into the middle of the page. I used margin-top on div3 to push the box to the bottom right corner. This created a small space between my div1 and the webpage, so I used margin -.8% to pull the div back into the correct position.

[Challenge 2] https://codepen.io/cdallava/pen/QqmRNK


### Challenge 3

I created two divs and gave div1 a dark grey background color and div2 a black background color. In order to get them to stack uzing the z-index, I had to give each div a position other than static (the default). I gave div1 a relative position, and div2 an absolute position. The exercise would not work when both were relative. Then I moved the div2 into the center of div1 using margin-top and -right.

[Challenge 3] https://codepen.io/cdallava/pen/vejVoE

#### Challenge 4

I created two divs and gave div1 a black background and div2 a dark grey backgroung. To get them to stack, I HAD to have the div1 (in the background) a position relative, while I HAD to give div2 a position absolute. When the divs were opposite positions, they did not stack. I gave div2 an inline display so it would share space with div1, gave div2 a higher z-index value, and then moved the margins so div2 would be overlapping.

[Challenge 4] https://codepen.io/cdallava/pen/EwLObB

##### Challenge 5

I created identical divs with unique ids. I used float on div1 to get it to align right and then gave it a top and right margin of -1% to get rid of the slim margin between the div and the webpage. Then I centered div2 using margin-right and margin-top. I gave the div a position of absolute because when I gave it relative, the other divs would not act according to their set margins. Then with div3, I just gave it a top margin to get it positioned towards the bottom of the page and a negative margin-left to get rid of unwanted whitespace between the div and the webpage.

[Challenge 5] https://codepen.io/cdallava/pen/zEjyOx

###### Challenge 6

I created 3 divs and anchored the large div1 on the bottom right with a position of absolute. Since the smaller divs are inside the larger div in the html, div 2 and 3 appear on top of div1. Then I also gave div2 and 3 a position of absolute and anchored them accordingly.

[Challenge 6] https://codepen.io/cdallava/pen/EwRpWG

####### Challenge 7

I made div1 bigger, gave it a background color of grey, and a position of relative. Then I gave div2 a position of absolute and anchored it to the bottom right corner.

[Challenge 7] https://codepen.io/cdallava/pen/yzQNgw