CSS Positioning

In this exercise you learn some tricks for css positioning together with different layout types

Exercise 1: horizontal positioning

Use the template provided here: Template and a solution on how to center an element

• Add a border to .inner element: 1px, solid, black
• center the element horizontally
1. with a fixed width of 400px
2. without a fixed width

There are different solutions to this exercise, some work with both constraints, some only work with just one constraint

Template

Solution 1 (only works with fixed width)

Solution 2 (works with and without fixed width)

Exercise 2: horizontal and vertical positioning

Use the template provided here: Template and a solution on how to center an element

• Add a border to .inner element: 1px, solid, black
• Implement different solutions
1. with absolute/relative positioning
2. with flex layout
3. with grid layout

Template

Solution 1: absolute layout

Solution 1: Flex Layout

Solution 1: Grid Layout