List of 15 layout challenges

layoutchallenges.md

CSS Layout Challenges 1-15

Challenge 1

I created a containing element to hold div2 and div3 and then I floated the container to the right.

Challenge 1

Challenge 2

I left the divs as block elements and put a margin-left and right of auto on div 1 and 2 (twice the width of the div), and a margin-left of auto on div 3;

Challenge 2

Challenge 3

I used ,margin: 0 auto, to horizontally align div's 1 and 2, and then I added a margin top to div2 to get it to center correctly

Challenge 3

Challenge 4

I used position: relative and then bumped the div up 50px by using Bottom(half the height of the two divs) and 50px; to the right by using Left.

Challenge 4

Challenge 5

I used margin-left: auto to get the first div to slide all the way to the right. I then used margin: 0px auto for div2. div3 is just cool chillin' right where it was at.

Challenge 5