The Holy Grail layout is a famous CSS page layout that has traditionally been hard to implement. It consists of a header, footer, and three columns. The left column contains navigation items, the middle column contains the page contents, and the right column contains ads.
![Holy Grail layout example](/img/questions/holy-grail/holy-grail-example.png)
Implement the Holy Grail layout using just CSS. You shouldn't need to change the HTML too much.
Requirements
- Header
- Stretches horizontally across the whole page.
- 60px tall.
- Columns
- Both the left and right columns have a fixed width of 100px.
- The center column is fluid-width.
- All the columns should have the same height, regardless of which column is the tallest.
- Footer
- Stretches horizontally across the whole page.
- 100px tall.
- The footer should be at the bottom of the page even if there is not enough content to fill up the viewport height.