jbevis/CSSchallenge.md

## CSSchallenge.md

      
    Raw
  

              CSSchallenge.md
            
          
    These are ugly

Challenge 1

Three sibling elements given equal parameters in the CSS.
Set them to inline-block to run horizontally.
Then gave Div2 a margin right of 50% to push is out from dive1
[Challenge 1] http://codepen.io/bevis1308/pen/ygpRbZ
Challenge 2

Three sibling div elements.
Left Div1 alone to keep it in place in upper left.
Set #div2 margin: auto to center it.
Set #div3 to margin-left: 75% to push it out.
[Challenge 2] http://codepen.io/bevis1308/pen/XpVQeB
Challenge 3

Two sibling div elements.
Established width, height, background-color, color for div in CSS.
Also, added margin: auto: to center both elements.
Then adjusted #div1 margin-top to 10% to push down from top.
#div2 has margin top: -225px to push it up over #div1, but keeping relative to div1.
[Challenge 3] http://codepen.io/bevis1308/pen/dNJLmx?editors=1100
Challenge 4

2 sibling div elements. div1 is left alone, and div2 has margin-left: 60px; and margin-top: -115px to move over to the right and up over div1.
[Challenge 4] http://codepen.io/bevis1308/pen/jyZmZe
Challenge 5

3 sibling div elements. #div1 margin-left: 80% to push all the way over to upper right. #div2 margin: auto; to center.
[Challenge 5] http://codepen.io/bevis1308/pen/MJQmLM
Challenge 6

This challenge has 1 parent div element (div1) with two child elements (div2, div3).
div1 is floated to the right, and has a top margin to push it down the page.
Within div1: div2 is floated to the left and has a top-margin: 100px to push to bottom corner.
div3 is floated right.
[Challenge 6] http://codepen.io/bevis1308/pen/apqVvm?editors=1100#0