Skip to content

Instantly share code, notes, and snippets.

@jksmall0631
Created October 15, 2016 23:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jksmall0631/b6b7620088b2f24068f9b16aa1b1a819 to your computer and use it in GitHub Desktop.
Save jksmall0631/b6b7620088b2f24068f9b16aa1b1a819 to your computer and use it in GitHub Desktop.
CSS Challenges

###Challenge 1

For challenge 1, I started by putting a container around div 2 and 3. I changed the position of all divs to inline-block. I gave the container a width and a height to allow room for div 2 and three to sit inside. Finally, I floated the container right.

challenge 1

###Challenge 2

For challenge 2, I started by setting margin to auto on div 2. Then, I set div 3's position to absolute and gave it a right value of 0.

challenge 2

###Challenge 3

For challenge 3, I started by nesting div 2 within div 1 inside of the html file. I gave div 1 a margin auto to center it. I then gave div 2 a margin of 30px auto. This centered the div both vertically and horizontally within div 1.

challenge 3

###Challenge 4

For challenge 4, I started, again, by nesting div 2 within div 1 inside of the html file. I then set div 2's position to absolute. I then gave div 2 a left and top value of 50px since I knew the height and width of div 1 is 100px, this centered the top left corner of div 2 within div 1.

challenge 4

###Challenge 5

For challenge 5, I started by setting div 1's position to absolute with a 'right' value of 0. This sent the div to the right side of the screen. I then made div 2 and 3 position relative with a top value of 100px. This pushed them down relative to where they would naturally sit on the page leaving room for the gap where div 1 would have sat. I then set div 2's margin to auto to center it horizontally.

challenge 5

###Challenge 6

For challenge 6, I started by nesting div 2 and 3 inside div 1, inside the html file. I then gave div 1 a width and height so it could contain 2 and 3. I also set div 1's display to absolute. and gave it a right and bottom value of 0, sending it to the bottom right. I then made div 2 and 3 absolute. Last I set div 2 left and bottom to 0 and div 3's right and top to 0.

challenge 6

###Challenge 7

For challenge 7, I started by nesting div 2 within div 1. I then set both div positions to absolute. This allowed div 2 to sit inside div 1. Finally I set div 2's right and bottom value to 0.

challenge 7

###Challenge 8

For challenge 8, I did exactly the same as challenge 7. Instead of right and bottom, I used a right and top value of 0.

challenge 8

###Challenge 9

For challenge 9, I first nested div 2 and 3 inside div 1. I specified the height and width and put a position: absolute on div 1. On div 2 and three I made the margin: auto, positioned absolute, and added a right and left value of 0. This centerd both divs within div 1. Then I specified div 2 top: 0 and div 3 bottom: 0 which pushed them to the top and bottom of the containing div.

challenge 9

###Challenge 10

For challenge 10, I first nested div 2 and 3 inside div 1. Set position: absolute and margin: auto on all three divs. I gave div 1 a left and right value of 0 to center the element. And gave it a margin top of 30px. I then gave div 2 and 3 a top and bottom value of 0 to center vertically. Lastly, I gave div 2 a left of 50px and div 3 a right of 50px.

challenge 10

###Challenge 11

For challenge 11, I started by nesting div 2 inside div 1 and div 3 inside div 2. Then I positioned all three absolute and gave 2 and 3 a bottom and right value of 0 to push them to the bottom right corner. Last, I gave div 3 a right and bottom margin of 10px.

challenge 11

###Challenge 12

For challenge 12, I started by nesting div 2 and 3 inside div 1. Then I positioned all three absolute. Then I set the bottom value to 0 and the right value to -75 to make half of div 2 sit outside div 1. Last I set div 3's position to right: 0, bottom: -50.

challenge 12

###Challenge 13

For challenge 13, I started by nesting each div inside the preceding div. I gave each a position: absolute. Then I gave div 2-5 a left and top value of 50px.

challenge 13

###Challenge 14

For challenge 14, I started by nesting div 2 inside div 1. I made both their positions absolute and I made div 1's right value 0 and div 2's bottom value 0.

challenge 14

###Challenge 15

For challenge 15, I started by putting all 4 divs inside of a container that I specified the dimentions on. I set all positions to absolute. Then I set div 2 and 3 position right to 0 and div 3 and 4 position bottom to 0.

challenge 15

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