Skip to content

Instantly share code, notes, and snippets.

@lucykepner

lucykepner/myfile.md

Last active March 24, 2017 17:19
Show Gist options
  • Save lucykepner/6727e8c169d2d280c8d45ddd521d4c03 to your computer and use it in GitHub Desktop.
Save lucykepner/6727e8c169d2d280c8d45ddd521d4c03 to your computer and use it in GitHub Desktop.
Download ZIP
My CSS Challenges
Raw
myfile.md

CSS Challenge 1

codepen 1 I used an article to wrap div2 and div3 in so they would stay in the proper order when they were floated right.

CSS Challenge 2

codepen2 Using display: block; on all the div elements put them each on their own line. Then I added margins to div2 to center it. And floated div3 right.

CSS Challenge 3

codepen3 Div2 is nested inside div1 and positioning is determined by margins. Color was chosen using colorzilla in chrome.

CSS Challenge 4

codepen4 div1 is positioned relative and div2 is positioned absolute with top and left set to 75px.

CSS Challenge 5

codepen5 Similar to challenge 2 but float div1 right and apply clear:both to all divs so they maintain their block positioning.

CSS Challenge 6

codepen6 I did a bunch of stuff and eventually it worked. I wrapped the divs in a section. I made the section position:relative. Then I made div1 position:absolute and positioned it on the page. The other two divs are inside of div1 and floated left and right.

CSS Challenge 7

codepen7 div2 is floated right inside of div one and moved down with margins.

CSS Challenge 8

codepen8 div2 is floated right inside of div1.

CSS Challenge 9

codepen9 I put div2 and div3 inside of div1. I did cool relative/absolute positioning that you showed us.

CSS Challenge 10

codepen10 ##This is awesome.

CSS Challenge 11

codepen11

CSS Challenge 12

codepen12

CSS Challenge 15

codepen 15 not finished yet.

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