Skip to content

Instantly share code, notes, and snippets.

@sljohnson32

sljohnson32/CSS Layout Challenges

Last active October 15, 2016 18:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sljohnson32/66ad567e79f58159b5163ff1ecc8128b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sljohnson32/66ad567e79f58159b5163ff1ecc8128b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CSS Layout Challenges
##### Challenge 1
I used part of the reset CSS functionality from the web to remove existing CSS formatting and then used divs to break out div2 and div3 from div1. I set the container div I created to hold div2 and div3 to have position absolute and offset it from the right site by 0.
[Challenge 1] (http://codepen.io/sljohnson32/pen/yaEOjG)
##### Challenge 2
I created classes around div2 and div 3 and manipulated their placement as block level elements using margin set to auto for div 2 and float right for div 3.
[Challenge 2] (http://codepen.io/sljohnson32/pen/jrKARb)
##### Challenge 3
Nested div2 within div1 and then used auto margin to center the two divs.
[Challene 3] (http://codepen.io/sljohnson32/pen/BLVLpy)
##### Challenge 4
I used two divs with absolute position and then used margin to adjust div2 to move right and down on the page by half the width/length of the boxes created.
[Challenge 4] (http://codepen.io/sljohnson32/pen/dpKpgE)
##### Challenge 5
I created a container for div1 and floated it to the right and then used auto margin to center div 2 and left div 3 as is in its default position.
[Challenge 5] (http://codepen.io/sljohnson32/pen/BLVLEQ)
##### Challenge 6
I nested div2 and div3 into div1 and used absolute positioning to move div1 to the lower right corner and absolute to move div 2 down and floated div3 to the right.
[Challenge 6] (http://codepen.io/sljohnson32/pen/dpKOGP)
##### Challenge 7
I nested div2 into div1 and made them both absolute and then used bottom and right to move div 2.
[Challenge 7] (http://codepen.io/sljohnson32/pen/EgRNpY)
##### Challenge 8
I nested div2 into the main div and then used absolute position on the main div and positioned div2 into the top right corner using top/right.
[Challenge 8] (http://codepen.io/sljohnson32/pen/KgBOJN)
#####Challenge 9
I nested div2 and div3 into a div and used absolute position to position them on the top and bottom and then used left to move them to the middle of the page.
[Challenge 9] (http://codepen.io/sljohnson32/pen/Zpjgga)
#####Challenge 10
I nested div2 and div3 into a div and used position absolute with top on div2/3 and then right on div3 and then margins to space div2/3 from the sides of the div.
[Challenge 10] (http://codepen.io/sljohnson32/pen/NRLKNb)
#####Challenge 11
I nested div 2 into a div and div 3 into div 2 and then used bottom and right to position div2 and div 3 and margin to bump div 3 off the edges of div 2
[Challenge 11] (http://codepen.io/sljohnson32/pen/gwdYma)
#####Challenge 12
I used the same approach as for the above exercise but instead used negative numbers to push div 2 and div 3 off of the main div as required.
[Challenge12] (http://codepen.io/sljohnson32/pen/dpqbVx)
#####Challenge 13
I nested each div within one another and then allowed top/left to move cascade to each. I also created two classes for div 2-5 so that I could color them appropriately.
[Challenge 13] (http://codepen.io/sljohnson32/pen/amaoqX)
#####Challenge 14
I nested div 2 into a div and used absolute position and right to move the main div to the right side of the page and then bottom and left to move div 2.
[Challenge 14] (http://codepen.io/sljohnson32/pen/xEaKjZ)
#####Challenge 15
I used absolutel positioning to move all 4 divs into their respective corners and set the appropriate right and bottom pixels to align div 2-4.
[Challenge 15] (http://codepen.io/sljohnson32/pen/mAGbGP)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment