Lab 4, Part 2

This was marked out of 2. You got 2 out of 2 if you followed all the instructions.

You lost a mark if you failed to follow so much as one instruction. For example, if you
did not use a sequence of five echo statements to produce the ul; if you did not include
id="haiku" on the <ul> start tag; if you did not put the date into a paragraph; if you 
did not format the date DD/MM/YYYY, which required you to write echo date('d/m/Y'),
including the slashes; if it did not validate.

You lost all marks if you did not put the date in at all; or if you hard-coded the date 
instead of doing it dynamically; or if your program had compile-time or runtime errors; 
or if you failed to follow more than two of the instructions.

The lesson is: READ THE INSTRUCTIONS.

Too many of you are rushing the exercises to try and get out the door.

---
Lab 4, Part 5

This was marked out of 8.

Obviously, you got zero if the columns weren't in the same place as they were in the
screenshot in the lab sheet, i.e. nav on the left, main in the middle, aside on the
right.

Obviously too, you lost a heap of marks if you used pixels anywhere - this was supposed
to be a liquid layout.

A handful of marks were lost if you did too much floating, or set too many widths, or 
omitted margins.

To explain, suppose you have #a then #b in your HTML and you want a two-column layout. 
Then float #a and give it a width.
Do not float #b. Do not give it a width. Instead, give it a left margin, equal to the width
of #a.
This is the most robust approach. I showed you in the lecture what can go wrong if you don't
give #b a margin. Consult the notes that you took!

In part 4 of this lab sheet, you had three things. But the principle is the same.
Float #a and give it a width.
Float #b and give it a width.
Do not float #c. Do not give it a width. Instead, give it a margin, equal to the sum of the
widths of #a and #b.
Again this is the most robust approach. Giving #c a width runs a risk in some browsers. If
any of the widths (which are in percentages) do not work out as whole numbers of pixels, then 
there will have to be some rounding (up or down). The risk is that, after rounding, the sum of 
the widths of #a plus #b plus #c may exceed the width of the #wrapper.

We carry the same ideas into part 5. We split it into two parts.

First we consider the #main-and-nav and aside. 
Float the #main-and-nav left, and give it a width.
Do not float the aside. Do not give it a width. Instead, give it a left margin, equal to 
the width of the #main-and-nav.

Second we consider the #main and the nav (which are inside the #main-and-nav).
Float the #main right, and give it a width.
Do not float the nav. Do not give it a width. Instead, give it a right margin, equal to the
width of the #main.

The only remaining issue is to get the percentages right - which most of you did. Percentage
widths are relative to the parent. 
In the case of the #wrapper, the parent is the viewport, hence 75%.
In the case of the #main-and-nav, the parent is the #wrapper, hence 80%.
In the case of the #main, the parent is the #main-and-nav, hence 75%.
You lost several marks if you got these wrong.