noetic97/CSS-layout-challenges.md

## CSS-layout-challenges.md

      
    Raw
  

              CSS-layout-challenges.md
            
          
    Challenge 1

After creating the div elements and sizing plus coloring them with some CSS, I applied display: inline-block; to line up the divs.  Then I applied float: right; to the second and third div to move the to the right side of the screen while leaving the the first div to the left.  After that, I appplied margin-left: 10px; to div two and three to create space between the second and third div elements.
Challenge 1
Challenge 2

Using the same markup from challenge 1, the divs started off to the left stacked on top of each other.  I left div1 alone. For div2, I applied margin: 0 auto;.  This set the top and bottom margins to 0 and the left and right were set to be automatically calculated to be an equal size from the edge of the containing element which is the body. This centered div2.  For div3, I set a float: right; to move the div to the right most side of the screen.
Challenge 2
Challenge 3

text
Challenge 3
Challenge 4

text
Challenge 4
Challenge 5

text
Challenge 5
Challenge 6

text
Challenge 6
Challenge 7

text
Challenge 7
Challenge 8

text
Challenge 8
Challenge 9

text
Challenge 9
Challenge 10

text
Challenge 10
Challenge 11

text
Challenge 11
Challenge 12

text
Challenge 12
Challenge 13

text
Challenge 13
Challenge 14

text
Challenge 14
Challenge 15

text
Challenge 15