Skip to content

Instantly share code, notes, and snippets.

@mngatewood
Last active December 11, 2017 04:15
Show Gist options
  • Save mngatewood/6bb9f236a99a984f3dd0909313f9ae6b to your computer and use it in GitHub Desktop.
Save mngatewood/6bb9f236a99a984f3dd0909313f9ae6b to your computer and use it in GitHub Desktop.

CSS Challenges

Challenge 1

I floated div1 to the left and div2 to the right. Div2 is set 105 pixels to the left of its natural position, leaving room for div3. Div three is placed at the right edge using position:absolute and right:0.

Challenge 1

Challenge 2

Div1 sits in its natural position, with no extra CSS applied. Div2 is already positioned vertically, so I just changed the position to relative and centered it using margin:0,auto. Div3 is also positioned vertically, so it is simply moved to the right edge using position:absolute and right:0.

Challenge 2

Challenge 3

Div1 is just resized and centered with a margin of 20 pixels. Div2 is also centered, but lowered 150 pixels from its natural position using position:absolute and top:-150px.

Challenge 3

Challenge 4

Div1 is naturally positioned. Div2 is moved up and right 50 pixels from its natural position using position:relative. Div3 has a different background color.

Challenge 4

Challenge 5

Div1 is moved to the right edge using position:absolute and right:0px. Div2 is centered and lowered 100px. Div 3 is just moved down 100 pixels, since it naturally sits on the left edge.

Challenge 5

Challenge 6

Div1 is enlarged and moved to the bottom-right edge. Div2 and div3 are also offset from the bottom-right corner using position:absolute and values for bottom and right properties.

Challenge 6

Challenge 7

Div1 is resized with a different background color. Div2 is positioned 100px down and to the right of the top left edge using position:absolute.

Challenge 7

Challenge 8

This one is the same as exercise 7, except that div2 is positioned at the top edge (top:0px).

Challenge 8

Challenge 9

Div1 was resized and given a background color. Div2 repositioned along the top edge, 25 pixels to the right using position:absolute. Likewise with div3, except it was also pushed down 200 pixels from the top.

Challenge 9

Challenge 10

Div1 was resized, given a background color, and centered. I could have applied a margin to separate it from the top edge, but I chose to position it using position:absolute. Div2 and div3 are are also centered, but then offset using position:relative and top and left properties.

Challenge 10

Challenge 11

Div1 is only resized and recolored. Div2 is resized and offset down and to the right of its natural position using position:relative. Div3 is similar to div2, except that it has a different background color and different values for the top and left properties.

Challenge 11

Challenge 12

This challenge is the same as challenge 11, except that div2 and div3 have different values for top and left properties.

Challenge 12

Challenge 13

All divs are 100 x 100 pixels with alternating background colors. Each div beginning at div2 is offset from the previous div. This is achieved with position:relative and subtracting an additional 50 pixels up and 50 pixels to the right with each new div.

Challenge 13

Challenge 14

Div1 is increased to 200x200 pixels and positioned on the top-right edge using position:absolute. Div2 is a different background color and also positioned absolute right, but offset 100 pixels from the right and 100 pixels from the top.

Challenge 14

Challenge 15

Div1 is increased to 200x200 pixels, recolored, and remains at the top-left corner. The remaining divs are all positioned relative to their natural position, offset from the top and left by varying amounts. Div4 is also 200x200 pixels with a different background color.

Challenge 15

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