Skip to content

Instantly share code, notes, and snippets.

@Ggoering

Ggoering/csschallenge.md

Last active March 24, 2017 17:52
Show Gist options
  • Save Ggoering/2ad081bc2c284c15ecf74932d4179cc0 to your computer and use it in GitHub Desktop.
Save Ggoering/2ad081bc2c284c15ecf74932d4179cc0 to your computer and use it in GitHub Desktop.
Download ZIP
CSS layout challenges
Raw
csschallenge.md

I learned that codepen doesn't create a new save if you change the file name and save again... So I can only share where I started a new pen. :sadface:

CSS Layout Challenge Number 3

Nested div 2 in div 1. Div 1 had position: relative. div 2 used position absolute. I subtracted half of div 1 height and width by half of div 2 height and width to get the positioning for the center, so then set top: 75px and left: 75px on div 2.

CSS Layout Challenge Number 10

Nested div 2 and 3 within div 1. I floated 2 and 3 left and right respectively with 50px margin, and translatedY 25%.

CSS layout challenge Number 15.

Switch div 3 and 4 in the html and then float 1 and 3 left and 2 and 4 right. Set reasonable margins below on 1 and 2. EZ ;)

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