Skip to content

Instantly share code, notes, and snippets.

@lauraturk

lauraturk/css_challenge.md

Last active February 1, 2017 16:07
Show Gist options
  • Save lauraturk/7292f8d92ac6335760cb6ee2a644dc54 to your computer and use it in GitHub Desktop.
Save lauraturk/7292f8d92ac6335760cb6ee2a644dc54 to your computer and use it in GitHub Desktop.
Download ZIP
My CSS Challenges
Raw
css_challenge.md

CSS Challenge 1

I struggled with this one. Eventually, I made an empty div to hold the three divs, I set the empty div's position to relative and 2 and 3 to absolute, then pushed them left. I know there is a better way, I just couldn't get anything to work. CodePen-1

CSS Challenge 2

I created an empty div with three black divs inside. I set the empty div's postion to relative and the three black divs to absolute. I set the top value of div two for 10 px less than the height of div one, and repeated with div three relative to div two. I set div three left 700px and then split the difference to line up div 2 between the two others. CodePen-2

CSS Challenge 3

I nested div 2 in div 1, set the colors of both, set div 1's top margin to 10 and to auto on the side margins to center it. I calculated that a 200px box perfectly centered in a 400px box would have a margin of 100px around it. CodePen-3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment