Skip to content

Instantly share code, notes, and snippets.

@jsullivan5

jsullivan5/CSS_Layout_Challenge.md

Last active March 26, 2017 23:18
Show Gist options
  • Save jsullivan5/5b5c62455f8413df8c12c67b59d1453f to your computer and use it in GitHub Desktop.
Save jsullivan5/5b5c62455f8413df8c12c67b59d1453f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CSS_Layout_Challenge.md

CSS Layout Challenge

Challenge 1

I created three divs and styled them into black boxes. I then floated two of them right. I reversed the order of div one and two to reflect the comp. I then gave div two a margin right vlaue of 5px to reflect the comp.

Challenge 2

I again created three divs and styled them into black boxes. I knew as block elements they would naturally stack vertically. I centered div 2 by using margin: auto. I floated div three to the right.

Challenge 3

I created two divs, one larger to conatain the smaller. I used relative and absolute positioning to center the smaller div within the larger.

Challenge 4

I used relative and ablsolute positioning to offset div 2 from div 1.

Challenge 5

I floated div 1 right. I used a clear: both property on the second div and margin: auto to center div 2.

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