Skip to content

Instantly share code, notes, and snippets.

@wheresmytyphone
Last active May 10, 2017 15:37
Show Gist options
  • Select an option

  • Save wheresmytyphone/b9e07ce035d618f08700e3b61bf48933 to your computer and use it in GitHub Desktop.

Select an option

Save wheresmytyphone/b9e07ce035d618f08700e3b61bf48933 to your computer and use it in GitHub Desktop.
CSS Layout Challenges
Challenge 1

floated each box to the correct side, swapped the divs in HTML to reorder the numbers.

Challenge 1

Challenge Two

Removed float so boxes displayed in block, used auto margins to move boxed to match comp.

Challenge 2

Challenge Three

Nested div2 inside of div1, increased size of div1 to 300px, added 50px margin to the top of div2.

Challenge 3

Challenge Four

Nested div2 within div1, adjusted top/left to 75px.

Challenge 4

Challenge Five

Put divs in reverse order, gave div3 an auto left-margin, and div 2 an auto margin.

Challenge 5

Challenge Six

Used a combination of margins and positioning commands to push the boxes to match the comp.

Challenge 6

Challenge Seven
Challenge Eight
Challenge Nine
Challenge Ten
Challenge Eleven
Challenge Twelve
Challenge Thirteen
Challenge Fourteen
Challenge Fifteen
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment