4. A Flexible Site

This time, the content is a recipe, with an image. The files can be had here. Like before, read the content, and come up with a reasonable layout.

Before moving to a responsive site (which changes according to breakpoints established by media queries), a site should be flexible, or fluid, at least responding to the size of the browser window. We are staying with the desktop here, for the time being.

Width measurements should be made in terms of percentages. Type height should be set in ems (or rems). Line height is set with a number, with no unit.


  1. With this exercise, all CSS will be contained in a linked CSS file.
  2. The entire page should be a Reasonable© width, centered in the browser window.
  3. main and nav should be side-by-side, as they were in the previous exercise.
  4. The HTML syntax needs to be correct.
  5. The HTML file needs to reside in a directory (this is four) inside whatever you called the exercises directory, and will be named index.html. Get used to it.
  6. CSS needs to to place the header above main, with nav to either side of main, followed by the footer.
  7. This file must contain anchors back to your home page and the index page for exercises.
  8. As with the all assignments, once the local version is finished and tested, upload the changes to the server, and test from there.