Skip to content

Instantly share code, notes, and snippets.

@coleworsley
Last active March 23, 2017 19:36
Show Gist options
  • Save coleworsley/eccfaed9c773379788b29836c4e9cd0d to your computer and use it in GitHub Desktop.
Save coleworsley/eccfaed9c773379788b29836c4e9cd0d to your computer and use it in GitHub Desktop.

CSS Challenges

Challenge 1

For this challenge I nested div 2 and 3 in a section and floated that to the right as well as specify that the display be inline:block.

Challenge 1


Challenge 2

I gave each div a class (div1, div2, div3) and adjusted div 2 and div3 to have margin: auto and float right respectively.

Challenge 2


Challenge 3

I nested div2 inside of div1. I gave div1 a relative position and gave div2 an abolute position. I adjusted the top and left of div2 to fit inside of the center of div1.

Challenge 3


Challenge 4

I gave div1 a relative position and div2 an absolute position. I then offset the top and left properties by 75px.

Challenge 4


Challenge 5

I floated div1 right then cleared any floats on div2 and gave it's margin auto to center it.

Challenge 5


Challenge 6

I gave all the divs absolute positioning. For div1 I adjusted the offset for bottom and right to 0px. I did similar offsets to the other 2 divs which were nested inside of div1.

Challenge 6


Challenge 7

I nested div2 inside of div1 and gave them absolute and relative positions respectively. I then adjusted the bottom and right offsets for div2 to 0px and the height and width to 50% of the container.

Challenge 7


Challenge 8

I nested div2 inside of 1 and adjusted the height and width of div2 to be 50%. I then floated div2 to the right.

Challenge 8


Challenge 9

Nested div2 and 3 within div1. Div1 was given relative positioning and div2 and 3 absolute. I adjusted the sizing of the 2 nested divs to be a width of 70% of div1. Since there was 30% remaining, I set the offset to be 15% right in order to center each. div2 was set to the top margin and div3 was set to the bottom.

Challenge 9


Challenge 10

For this one I decided to experiment a little with flex box. I had to add a p tag and a span to do so (probably made it a little too complicated). i gave the span a justify-content space around, which allowed the middle boxes to fit well inside of the div. I gave the div1 text an absolute position to take it out of the pane so it didn't adjust any of the margins.

Challenge 10


Challenge 11

The 2 nested divs were given absolute positioning and div1 was relative. Since they had a lot of the same rules, i selected div div to adjust their positioning to the bottom right. I then changed the backround of div3 to have a background white with an alpha of .8.

Challenge 11


Challenge 12

Similar to challenge 11, however, i adjusted the top and left offsets of each of the nested divs to offset as a %.

Challenge 12


Challenge 13

I used 5 nested divs all with absolute positions. I then used a selector to identify all the nested divs and give them top and right offsets to create a cascading effect. Also i gave each one a class of even or odd and colored them appropriately.

Challenge 13


Challenge 14

I nested div2 within div1 and gave div 2 absolute positioning to the left and bottom of the container. I then floated div1 to the right.

Challenge 14


Challenge 15

Challenge 15

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