Exercise 9.4

This is Exercise #9.4, lecture on CSS Flexbox, used in the course IDATA2301 Web technologies at NTNU, campus Aalesund.

Go back to exercise list.

Purpose

The purpose of the exercise is to practice using flexbox in realistic layouts. Holy grail is a classic layout, many web pages use some form of it. Here is an example of a holy grail layout:

Holy grail layout example

Instructions

Create an HTML document from scratch. Arrange the elements in a holy-grail layout. Requirements:

  1. There should be a header, footer, main content area, navigation bar and an aside (with ads).
  2. Both the header and the footer must have fixed height and fill the whole width of the page.
  3. Both the navigation bar and aside (ad bar) must have fixed width and fill the whole available height.
  4. To have a bit of extra challenge: the navigation block should come after the main content in the HTML, but must be positioned on the left by CSS.
  5. Width of the main content area must be flexible - the content should fill the whole available space.
  6. The main content area must have a minimum width of 600px.

The following CSS properties may be handy:


        display: flex;
        flex-basis, flex-grow, flex-shrink
        order
        min-width, margin, padding
        text-align

Template

No template for this exercise.

Solution

You can find a solution here.