Skip to content

Instantly share code, notes, and snippets.

@mschae16
Last active May 14, 2017 16:09
Show Gist options
  • Save mschae16/f597c530bd99b4c176b55914467a53ad to your computer and use it in GitHub Desktop.
Save mschae16/f597c530bd99b4c176b55914467a53ad to your computer and use it in GitHub Desktop.
CSS Layout Challenge - Margo Schaedel

CSS LAYOUT CHALLENGE

Challenge 1

After defining the three divs, and setting their heights and widths to 200px, and floating all to the left so they would be in-line, I contained div2 and div3 within another div. This container div, I floated to the right.

Challenge 1

Challenge 2

There are three divs, with widths and heights of 200px. The first div is left alone, as by default it sits in the top left corner of the window. The second and third div are both positioned relatively, and sit 400px to the right of the previous div.

Challenge 2

Challenge 3

There are two divs, and div 2 is contained within inside div 1.

Challenge 3

Challenge 4

There are two divs, div 1 is black and sits at its default position. Div 2 is grey, and is positioned relatively, to the right 100px and overlays div 1 by 100px.

Challenge 4

Challenge 5

There are three divs. The first div is floated to the right, the second div is positioned relatively to the center, and the third div is positioned absolutely, adjacent to the left side of the window.

Challenge 5

Challenge 6

For the html, I contained divs 2 and 3 within div 1. I positioned div 1 absolutely to the bottom-right of the page. I positioned div 2 relatively to the bottom-left of div 1, and I floated div 3, which brought it to the top-right of the page.

Challenge 6

Challenge 7

Div 2 is contained within div 1. Div 1 sits in its default position at the top-left corner of the page. Div 2 is positioned absolutely 200px to the right, and 200px down, placing it in the bottom-right corner of div 1.

Challenge 7

Challenge 8

Div 2 is contained within div 1, similarly to challenge 7. Div 1 sits in its default position at the top-left corner of the page. Div 2 is floated to the right, placing it in the top-right corner of div 1.

Challenge 8

Challenge 9

Div 2 and 3 are contained within their own div, which is within div 1. Div 1 sits in its default position at the top-left corner of the page. The container div for div 2 and div 3 is centered within div 1. Within that container div, div 2 and div 3 are positioned absolutely, div 2 0px from the top, and div 3 400px from the top.

Challenge 9

Challenge 10

Div 2 and 3 are contained within their own div, which is within div 1. Div 1 is centered on the page with a top margin of 50px. The container div for div 2 and div 3 is also centered within div 1, with a padding of 20px. Within that container div, div 2 and div 3 are displayed as inline-block elements, and div 2 has a rightside margin of 150px.

Challenge 10

Challenge 11

Div 3 is contained within div 2 and div 2 is contained within div 1. Div 1 sits in its default position at the top-left corner of the page, with a height set to 600px and a width of 300px. Div 2 and div 3 are both positioned absolutely, with div 2 300px from the top of the page and 50px to the right, and div 3 10px from the bottom and from the right of the page.

Challenge 11

Challenge 12

Div 3 is contained within div 2 and div 2 is contained within div 1. Div 1 sits in its default position at the top-left corner of the page, with a height set to 600px and a width of 300px. Div 2 and div 3 are both positioned absolutely, with div 2 300px from the top of the page and 170px to the right, and div 3 120px from the right of div 2 and a -100px from the bottom.

Challenge 12

Challenge 13

There are five divs on the page, all with a height and width of 200px, and each with a class attribute respective of their numbers. Div 1, 3, and 5 are shown in black, while divs 2 and 4 are shown in grey. Div 1 sits in its default position at the top-left corner of the page. The remaining divs are all positioned absolutely, each one 100px from the top and left of the previous div.

Challenge 13

Challenge 14

There are two divs on the page; div 2 is contained within div 1. Div 1 sits in its default position at the top-left corner of the page, with a width and height of 400px. Div 2 has a width and height of 200px, and is positioned absolutely, 200px from the top of the div.

Challenge 14

Challenge 15

There are five divs on the page; four of the divs are contained within a large "container" div. Divs 1 and 4 have heights and widths of 300px, while divs 2 and 3 have heights and widths of 200px. All are displayed as inline-block elements. Div 1 sits in its default position at the top-left corner of the page, while div 2 is floated to the right. Div 3 and 4 are both positioned absolutely, div 3 to the bottom-left of the container div, while div 4 sits to the bottom-right of the container div.

Challenge 15

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