Skip to content

Instantly share code, notes, and snippets.

@gness1804
Last active August 27, 2016 22:52
Show Gist options
  • Save gness1804/72cb2f4901d02a99966e87aa2c1084fe to your computer and use it in GitHub Desktop.
Save gness1804/72cb2f4901d02a99966e87aa2c1084fe to your computer and use it in GitHub Desktop.
Responses to the 15 CSS Challenges from 8-24-16 class

###Challenge 1

I floated divs 2 and 3 to the right and switched the order of divs 2 and 3 in the html. I also added a left margin to div 3.

[challenge 1] (https://codepen.io/gness1804/pen/oLAbmG)

###Challenge 2

I created a container element to keep the divs from touching the bottom of the screen. I also floated div 3 to the right and added margin:auto to div 2.

[challenge 2] (https://codepen.io/gness1804/pen/pbXyzJ)

###Challenge 3

I did margin:auto to both divs and made the inner div have a height of 50% of the outer div and a top margin of 50px. I also wrapped both boxes in a container to position them on the page.

[challenge 3] (https://codepen.io/gness1804/pen/ZOdWYp)

###Challenge 4

I did position:absolute on div 2 to take it out of normal flow and make it go on top of div 1. I then used left and top properties to position the div relative to div 1. Finally, I wrapped both boxes in a container to position them on the page.

[challenge 4] (https://codepen.io/gness1804/pen/grNAPq)

###Challenge 5

I applied float: right to div 1 and clear:both to div 2 in order to push it down below the first div. This also pushed div 3 down to its desired place. I also used a container element for positioning.

[challenge 5] (https://codepen.io/gness1804/pen/pbXyNy)

###Challenge 6

I put divs 2 and 3 inside div 1. I then floated div 2 to the left and 3 to the right and applied margins and height and width dimensions to position the elements.

[challenge 6] (https://codepen.io/gness1804/pen/yJdOXa)

###Challenge 7

I put div 2 inside div 1. I then made div 1 larger than div 2 and made div 2 float right and have a top margin to fit it into the bottom right corner. I also created a container element to position the two boxes on the page.

[challenge 7] (https://codepen.io/gness1804/pen/dXBrZQ)

###Challenge 8

Like in challenge 7, I made div 1 larger than div 1 and placed div 2 inside it. I then floated div 2 to the right and resized it using height and width. I also used a container element to position the boxes.

[challenge 8] (https://codepen.io/gness1804/pen/grNAjV)

###Challenge 9

I made the first div larger than the others and put them both inside div 1. I then did margin: auto to both to center them and applied top margins to both to position them within the larger div.

[challenge 9] (https://codepen.io/gness1804/pen/zBVqmR)

###Challenge 10

I placed div 2 and div 3 inside div 1. I then resized div 1 and positioned it in the center using margin: auto. I applied display: inline-black to divs 2 and 3 and position them using margin properties.

[challenge 10] (https://codepen.io/gness1804/pen/VjJaNN)

###Challenge 11

I made div 1 larger and then placed divs 2 and 3 inside it. I placed div 3 inside div 2 and then floated div 2 to the right. I then used margins to position the divs.

[challenge 11] (https://codepen.io/gness1804/pen/bZPZGw)

###Challenge 12

This was similar to challenge 11: I created a larger div 1, then placed divs 2 and 3 inside 1, and 3 inside 2. I then used margins to place the divs in proper position.

[challenge 12] (https://codepen.io/gness1804/pen/zBVBAJ)

###Challenge 13

I nested all five divs within each other and used left and top margins to position the boxes and create the cascading effect.

[challenge 13] (https://codepen.io/gness1804/pen/xOoOgr)

###Challenge 14

I put div 2 within the larger div 1. I floated div 1 to the right and then used margins to position div 2 inside div 1.

[challenge 14] (https://codepen.io/gness1804/pen/OXZXjb)

###Challenge 15

For this challenge, I made the first two divs display: inline-block and positioned div 2 to the right using margins. For div 3, I simply adjusted its top margin, and for div 4, I gave it a position: absolute and used positioning properties to move it to the correct place.

[challenge 15] (https://codepen.io/gness1804/pen/oLALov)

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