Model Answer for Scrolling Assignment
The assignment asked you to transform the sample web page into a linear style-based layout, with images no larger than 120 px wide, and to look into transforming the data table into another format.
Transforming the two-columns CSS based layout (with fixed width) into a linear one is mostly a matter of removing the float properties, and removing the fixed width and margin that are no longer relevant.
For images, using our images editor of choice, we simply scale down Beethoven's portrait to a 120px wide image, and take care of removing (or updating) the width attribute in the img tag.
The background image used in the header needs also to be resized, but simply scaling it down won't give a pleasant result for a background image; in this case, we simply choose to cut off the black borders of the image, and scale down the resulting image.
Transforming the table is in this case fairly simple: the number of items is not very long, and the correlation between lines and columns remains limited, and so turning the table into an HTML definition list (dl) doesn't lose much information (note that any kind of list here would be acceptable).
See the resulting modified page. Note that this is of course only one of the possible ways to implement what was requested.
Do note that transforming a table is not always that simple… When no good solution is available, providing the table as a single item on a separate page might help mitigate the problems that double scrolling creates.