Skip to content

Instantly share code, notes, and snippets.

@danalvarez5280
Last active May 23, 2017 14:54
Show Gist options
  • Save danalvarez5280/9a764102a047e91be1f07c0dbf852434 to your computer and use it in GitHub Desktop.
Save danalvarez5280/9a764102a047e91be1f07c0dbf852434 to your computer and use it in GitHub Desktop.
CSS Layout Challenge

###Challenge 1: Chalenge 1 In this challenge I made three divs in one section. I made one class for all three divs as well as individual ids for each. For the class i made all the divs the same width and height, same display of inline-block, same color and same absolute position. I put them in a section with a relative position. This was they all align at the top part of the section. I made the position from div 3 10px from the right. I made the position of div2 110px from the right. I made the margin-right on div2 10px to give it a small buffer of white space between div2 and div3. I left div1 alone as an aboslute position would keep it in the upper most left hand corner of the 'relative' section.

###Challenge 2:Challenge 2 In this challenge I have the same html set up as challenge 1. The differences in the css are simply adding the top attribut to div2 and div3. In div2 I added 100px to 'top' moving the div down 100px, exactly the height of div 1, then i added 40% to 'left' to move the div mostly into the middle. I added 200px for div3, exactly the height of div 1 and div2, I added 0px to 'right' to align div3 with the right hand side of the page.

###Challenge 3: Challenge 3 In this challenge I eliminated div3 in html and css. I made div 1 have a grey background and made the height and width 200px respectively. I kept div 2 black. I moved div1 350px 'left'. I moved div2 400px from 'left' and 50px from 'top'. This make the div2 square in the middle of div1 and as a whole moved everything into the center.

###Challenge 4: Challenge 4 In this challenge I kept both widths and heights 100px. Both were absolute 'position'. I made div1 have a grey background. I made div 2 offset by setting 'top' to 50px, exactly half of div1, and 'left' to 50px, exactly half of div1.

###Challenge 5: Challenge 5 In this challenge I made a class for all the divs. The widths and heights set to 100px, as wellI made all positions to "absolute". I gave each div its own id. Div1 I set the 'right' to 0px to align it all the way to the right side of the page. I set div2 'right' to 50% and 'top' to 100px. This aligns div2 into the center of the page width wise, and it is exactly down from the top the height of div 1. Div3 I set 'left' to 0px to align it on the left hand side. I set 'top' to 200px so it is exactly down the height of div1 + div2.

###Challenge 6: Challenge 6 In this challenge I made a section with the position relative, a width of 100% and a height of 400px. I gave each division a class and used that to give them black background and white text. As well 100px by 100px shape. As well I set the position of the divs to absolute. I gave each div its own id. For div1 I used its id to change the height and width to be bigger and I changed the backgroun-color to grey. I changed the 'bottom' to 0px and the 'right' to 0px moving this rectangle into the bottom right corner. For div 2 I moved the div by setting the 'bottom' to 0px and the right to '250px' so it would align with the bottom left most side of div1. Div3 I set the 'bottom' to 50px and the 'right' to 0px as so it would align with the top right most side of div 1.

###Challenge 7: Challenge 7 In this challenge I just mad div1 have a width and height of 300px. I made div2 have a height and width of 150px. I made div2 have a absolute 'position' and set 'top' to 150px and 'left' to 150px. This moved div2 perfectly onto the bottom right most part of div1.

###Challenge 8: Challenge 8 In this challenge I did the same thing as challenge 7 however instead of moving div2 down with 'top' set to 150px, I set set 'top' to 0px so div2 would sit on the top right most part of div1.

###Challenge 9: Challenge 9 In this challenge I made the width of div1 25px and the height 450px. I still have div2 and div3 with 'position' set to absolute. Then I moved div2 'left' 50px and 'top' set to 0px. Div3 'left' 50px and 'bottom' set to 0px.

###Challenge 10: Challenge 10 In this challenge I made a section with a position of absolute and a width of 1000px. I made three divs with the class id of "divs". These have a black background color. white text color, height and width of 150px and a position of absolute. I gave Div1 an id of "div1" and changed its width to 500px and its height to 200px, as well I changed the background color to grey. I moved div1 with 'top' 25px and 'left' 250px. I gave div2 and id of "div2", I moved it using 'top' 75px and 'left' 300px. I gave div3 an id of "div3" and I moved it using 'top' 75px' and 'left' of 550px.

###Challenge 11 Challenge 11 In this challenge I made a section with 'position' relative. I gave all the divs a class of "divs" with 'position' absolute. I made div1 with a height of 500px and width of 250px, and i made the background a dark grey with the hex code of 808184. I moved div2 with 'top' 200px and 'left' 50px and I made the background color of black. Div3 i moved with 'top' 340px and 'left' of 90px and I made the background color of light grey with hex code of D0D2D3.

###Challenge 12 Challenge 12 In this challenge I used absolute 'position' on all my divs. I made div 1 have a 'height' of 500px and 'width' of 200px and I set the background color to dark grey with the hex code of 808184. For div 2 I set the 'height' to 250px and the 'width' to 200px, I moved it with 'top' set to 250px and 'left' set to 100px and I made the 'background-color' black. For div3 i made the 'background-color' light grey with the hex code of D0D2D3, its 'height' and 'width' are set to 150px, and I moved it by using 'top' 425px and 'left' set to 50px.

###Challenge 13 Challenge 13 In this challenge I created 5 divs, all with the class of divs. In divs I made 'height' and 'width' 150px, and sett the 'background-color' to black, as well made the 'position' absolute.. Div 2 adn Div 4 I changed the 'background-color' to dark grey with a hex code of 808184. Because each div is 150px by 150px, each individual div had a 'top' and 'left' set to 75px from the last div. So div1 had 0px for 'top' and 'left'. Div2 is 75px, Div 3 is 150px, Div4 is 225px, and Div 5 is 300px.

###Challenge 14 Challenge 14 In this challenge I made a section with a width of 900px. I made a div1 inside the section with a 'width' 300px and a 'height' of 300px and I made the 'position' of relative, and the 'background-color' of grey. I used 'margin-left' of 600px to get div1 aligned with right side.I nested div 2 inside of div1. Div2 has a 'height' and 'width' of 150px and a 'background-color' of black. Div has a 'postioin' of absolute. Then I moved div 2 with top of 150px

###Challenge 15 Challenge 15 In this challenge i made div 1 and div 4 have the same class, I set their width and height to 300px and the background-color to grey. I made div 2 and div 3 have the same class and set their width and height to 150px, background color to black. All the divs had an absolute position. Div 2 I set 'left' to 500px. I Set div 3 'top' to 400px; I set div 4 'top' to 250px and 'left' to 350px.

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