Nested Divs

Note: the following material is from an older, outdated version of the web design curriculum pack. Please read about the revised and updated version of our Introduction to Web Design Curriculum.

Objectives

At the end of this lesson, you will be able to:

  • Apply the CSS box model to position and size XHTML elements
  • Place divs inside of other divs

Instructions

  1. Make a red div that is 100% wide and 50 pixels tall.
  2. Make a white div that is 100% wide with no specified height.
    1. Inside of this white div, make a gray div that is 600 pixels wide and centered in the screen. Hint: remember to set margin:auto; in order to make the gray div centered.
    2. Make this gray giv 300 pixels tall.
  3. Make a blue div underneath the white div that is 100% wide and 100 pixels tall.

Screenshot

Box Model Nested Divs

Rubric

Component Possible Points Score
Everything in the assignment is rendered properly in the browser. 12
Total Score 12

For full projects and source code, download the updated version of our Introduction to Web Design Curriculum.