Introduction to CSS Part II
You can write the code in the
styles.cssfile of the following sandbox. To see the rendered page, drag it from the right edge of a sandbox window.
Following are the tasks that you need to perform for the flexbox challenge:
- Header and footer to a width of 100% and height of 50px with fixed position.
- Set the header to a top value of 0.
- Set the footer to the bottom.
- Style the main element as:
- Display to flex;
- The elements to wrap;
- padding to 50px for the top and bottom;
- 0 for the rest.
- Fix the width of the middle column to 300px using the
Here is the result you should get. If you are having problems, you can drag the code part with a solution from the left edge of the sandbox window.