My CSS Challenges

myfile.md

CSS Challenge 1

codepen 1 I used an article to wrap div2 and div3 in so they would stay in the proper order when they were floated right.

CSS Challenge 2

codepen2 Using display: block; on all the div elements put them each on their own line. Then I added margins to div2 to center it. And floated div3 right.

CSS Challenge 3

codepen3 Div2 is nested inside div1 and positioning is determined by margins. Color was chosen using colorzilla in chrome.

CSS Challenge 4

codepen4 div1 is positioned relative and div2 is positioned absolute with top and left set to 75px.

CSS Challenge 5

codepen5 Similar to challenge 2 but float div1 right and apply clear:both to all divs so they maintain their block positioning.

CSS Challenge 6

codepen6 I did a bunch of stuff and eventually it worked. I wrapped the divs in a section. I made the section position:relative. Then I made div1 position:absolute and positioned it on the page. The other two divs are inside of div1 and floated left and right.

CSS Challenge 7

codepen7 div2 is floated right inside of div one and moved down with margins.

CSS Challenge 8

codepen8 div2 is floated right inside of div1.

CSS Challenge 9

codepen9 I put div2 and div3 inside of div1. I did cool relative/absolute positioning that you showed us.

CSS Challenge 10

codepen10 ##This is awesome.

CSS Challenge 11

codepen11

CSS Challenge 12

codepen12

CSS Challenge 15

codepen 15 not finished yet.