Skip to content

Instantly share code, notes, and snippets.

@EndlessHypnosis
Last active May 10, 2017 15:26
Show Gist options
  • Save EndlessHypnosis/760d8356fadc7f69a0ae85c9778f3d8d to your computer and use it in GitHub Desktop.
Save EndlessHypnosis/760d8356fadc7f69a0ae85c9778f3d8d to your computer and use it in GitHub Desktop.

CSS Layout Challenge!

For all challenges, I styled the divs to be a certain height and width, set background to black, and text to white.

Challenge 1

I included divs 2 and 3 in a section container and floated that to the right, after setting each div to inline-block

Challenge 1


Challenge 2

I set each div to display as block so that they would take up the entire row, and produce the cascading effect...I set the margin to auto for div2 to center it, and floated div3 to the right.

Challenge 2


Challenge 3

I placed div 2 inside of div 1 and set the position to relative. I then set margin to auto to center it, and then used the top property to push it down.

Challenge 3


Challenge 4

I set div 2 to absolute positioning and then pushed it down and to the left

Challenge 4


Challenge 5

I set div 1 to float right, then for div 2 i cleared the floats and set its display to table and auto margin so that it centers the box. NOTE: setting display to table isn't necessary, as it's already a block element and has a width.

Challenge 5


Challenge 6

I AM STOMPD ON THIS ONE

Challenge 6


Challenge 7

First I made the div1 larger, and set its position to relative so that the div2 inside of it could be set to absolute with a bottom/right of 0 to push it to the bottom right of div1

Challenge 7


Challenge 8

First I made the div1 larger, and set its position to relative so that the div2 inside of it could be set to absolute with a top/right of 0 to push it to the top right of div1

Challenge 8


Challenge 9

First I made the div1 larger, and set its position to relative so that the divs inside of it could be set to absolute so that the inner divs' edges touch the edge of div1. I took 2 different approaches for the inner divs. for div2 i set left to 50% and margin-left to half of the width of div2. for div3, because we know the width, i set left and right to both 0 and margin to auto.

Challenge 9

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