Ch. 11: Layout and Positioning: Arranging Elements

***Remember that you can view the source code (html) and css of each layout that is linked below. Right-click, “View source” or “View page source”, and see the html. To view the css, click the css linked on the html code (code reads href = “starbuzz.css” or some version of that). ***

***It is fine for you to mimic and copy the layout strategies below.***

Understanding the “flow” of elements — pp. 472-478

Floating elements as a layout strategy — pp. 479-482.

1. Reformatting the Starbuzz web page to a two-column web page using the floating strategy — pp. 483-500.

2. The jello layout — pp. 500-503.

3. Absolute positioning — pp. 503-509.

4. CSS table display layout — pp. 510-520.

Review of CSS layout strategies — pp. 521-522

Floating images in a header — pp. 523-527.

Using absolute positioning for an image — pp. 527-529.

Fixed positioning — pp. 530-536.

Relative positioning — p. 536