Skip to content

Instantly share code, notes, and snippets.

@dunncl15
Last active December 7, 2016 16:25
Show Gist options
  • Save dunncl15/ab870234f738a3f3c2c4a82891462149 to your computer and use it in GitHub Desktop.
Save dunncl15/ab870234f738a3f3c2c4a82891462149 to your computer and use it in GitHub Desktop.

###Challenge 1 I created three divs and assigned each a separate class in order to apply styles to each box individually. I wrapped divs 2 and 3 in a parent div in order to group them together. I left the positioning of div 1 alone and floated the parent div containing divs 2 and 3 to the right.

View CodePen

###Challenge 2 I created three divs and assigned each a separate class in order to apply styles to each box individually. I then wrapped all three divs in a parent div. I assigned the parent div a width of 100%. I centered div 2 using margin: 0 auto and I floated div 3 to the right. I left the default display of block in order to keep each div on separate lines.

View CodePen

###Challenge 3 I created two divs and assigned each a separate class. I wrapped the divs in a parent div called wrapper. I can the wrapper a width of 100% and a margin of 33% on the left and right in order to center the child divs. I give div 2 a relative position so I could manipulate its position using pixels to overlay on div 1. I moved it left 50px to center it along the x axis and up 200px to center it along the y axis.

View CodePen

###Challenge 4 I created two divs and assigned separate classes to each. Each div is 150px by 150px. In order to overlay div 2 on div 1 I gave dive 1 a position of relative and div 2 a position of relative. I then positioned div 2 left: 75px and top: 75px.

View CodePen

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