Skip to content

Instantly share code, notes, and snippets.

@nnchambs
Last active August 29, 2016 15:44
Show Gist options
  • Save nnchambs/69d8c2a522ce19ac51a04f5a8498c698 to your computer and use it in GitHub Desktop.
Save nnchambs/69d8c2a522ce19ac51a04f5a8498c698 to your computer and use it in GitHub Desktop.
CSS Layout Challenges
Challenge 1

Created three black divs with white text and set them all to inline-block. Floated div2 and div3 to the right and re-positioned them in the HTML (div3 above div2). Added 5px margin-right to div2.

Challenge 2

-Created three black divs with white text and set them all to block display. -Set div2 to margin auto, and div3 to float:right.

Challenge 3
  • Created a black div and a gray div.
  • Set the margins on div1 and div2 to auto and display to inline-block.
  • Set margins of div2 to position the element in the middle of div1.
  • Added block level header with 40px of height. Wrapped div2 in the div1 element so they will be nested together.
  • Added a container div element with block positioning to push div1 and div2 to the right.
  • Set div1's positioning to relative and reduced it's left margin by 100px to center the element.
Challenge 4
  • Created a black div1, gray div2, and .container div elements.
  • Set div1 and div2 elements' height and width to 100px to create square.
  • Set the container div element's height and width to 150px.
  • Set div2 float to right with a z-index of 2 to keep it on top of div1.
  • Set position of div2 to relative so we can position it within the container.
  • Set div2 margin-bottom to 50px to push it's left corner up into the middle of div1.
Challenge 5
  • Created three black div elements (div1, div2, div3) with heights and widths of 100px and block display.
  • Floated div1 to the right to set it in the top right corner.
  • Set div2's margin to auto to position it in the middle of the page and gave it a relative position.
  • Set div3's float to left to position it in the bottom left.
  • Wrapped div1 in a 100px tall header element to push it up in the page flow.
  • Set div2 margin-bottom to 50px to push it's left corner up into the middle of div1.
Challenge 6
  • Created three div elements ("div2", "div3", and "container")
  • Wrapped the "container" element in a footer element so we can easily position it on the bottom and wrapped div2 and div3 in the container element.
  • Set div2 and div3's height and width to 100px.
  • Floated div3 to the right to put it in the top right corner of the footer element
  • Floated div1 to the right to set it in the top right corner.
  • Set div2's margin to auto to position it in the middle of the page and gave it a relative position.
  • Set div3's float to left to position it in the bottom left.
  • Set footer position to absolute and set the right and bottom values to 0px so it will be absolutely positioned in the bottommost right corner.
  • Created a p element to contol the position of the "div1" text and set the display to inline and position to absolute with a top value of -10px to position it in the top left of the container div element.
Challenge 7
  • Created two div elements (div1, div2) and wrapped div2 in div1
  • Set div2's height and width to half of div1's height and width
  • Floated div2 to the right and gave it a margin-top of 100px (half of div1's height and width).
  • Set div2 and div3's height and width to 100px.
  • Set div1's position to absolute and declared top and left as 0px to push it to the farthest possible top and left position.
Challenge 8
  • Created two div elements (div1, div2) and wrapped div2 in div1
  • Set div2's height and width to half of div1's height and width
  • Set display to inline-block
  • Floated div2 to the right
  • Set div1's position to absolute with top and left values of 0 to put it in the uppermost lefthand corner
Challenge 9
  • Created three div elements (div1, div2, and div3) and wrapped div2 and div3 in div 1.
  • Set dimensions of div1 to 300px height by 150px width.
  • Set dimensions of div2 and div3 to 100px height by 100px width.
  • Set display of all divs to inline-block.
  • Set all div positions to absolute.
  • Positioned div 1 in the uppermost lefthand corner with a left and top value of 0.
  • Positioned div 2 and div 3 with a left position of 25px to center them within div 1.
  • Gave div2 a top positioning of zero to set it at the top of the window and div3 a bottom positioning of 0 to set it at the bottom.
Challenge 10
  • Created three div elements (div1, div2, and div3) and wrapped div2 and div3 in div 1.
  • Set dimensions of div1 to 150px height by 300px width.
  • Set dimensions of div2 and div3 to 100px height by 100px width.
  • Set display of div2 and div3 to inline-block.
  • FLoated div2 to the left and floated div3 to the right.
  • Gave div2 and div3 margin-tops of 25 and div 2 a margin-left of 25 and div3 a margin-right of 25.
  • Gave the container element a padding of 25px and a left-padding of 550px to push div1 into the center.
Challenge 11
  • Created three div elements (div1, div2, and div3).
  • Wrapped div2 and 3 in div1, and div3 in div2
  • Set dimensions of div1 to 500px height and 200px width and gave it an absolute position with a left value and top value of 0.
  • Set height of div2 to 50% and width to 80% of div1
  • Floated both div2 and div3 to the right
  • Set margin-top of div3 to to 85% and margin-right to 10%
Challenge 12
  • Created three div elements (div1, div2, and div3).
  • Set them as their own "self-contained" elements.
  • Set positions of all div elements to absolute with a top and left value of 0.
  • Set size of div1 to 500px x 200px, div2 to 250px x 200px, and div 3 to 125px x 125px.
  • Set z-index of div1 to 0, div2 to 2, and div3 to 3 to keep div2 and div3 displayed on top of div1.
  • Set margin-top of div2 250px and margin-left to 100px.
  • Set margin-top of div3 to 435px, margin-bottom to 25px, and margin-left to 75px.
Challenge 13
  • Created five div elements (div1, div2, div3, div4, div5) and set the height and width of all div elements to 50px.
  • Set them as their own "self-contained" elements with a background-color of black and color of white.
  • Set positions of all div elements to absolute with a top and left value of 0.
  • Set z-index values of div1 to 0, div2 to 1, div3 to 2, div4 to 3, and div5 to 5.
  • Set margin-left and margin-top of div2-div5 to an additional 50px to the left and right of the previous div.
Challenge 14
  • Created two div elements and wrapped div2 in div1.
  • Set height and width of div1 to 200px and div2 to 100px
  • Set position of div1 to absolute and top and right to 0.
  • Set top-margin of div2 to 100px.
Challenge 15
  • Created four divs.
  • Set the height and width of div2 and div3 to 100px and div1 and div4 to 250px and 22px.
  • Set position on all four divs to absolute.
  • Set margins of each div element to position accordingly :-(
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment