Set width of layout areas


  1. In format.css, add the property float:left to the links area:

    #links {
    background: #cccccc;
    float: left;
    }
  2. Make the links area 200 pixels wide:

    #links {
    background: #cccccc;
    float: left;
    width: 200px;
    }
  3. Give the content area a left margin of 220 pixels:

    #content {
    background: #ffffff;
    margin: 0 0 0 220px;
    }

Specifying measurements

In style sheets, you can specify measurements in a sort of shorthand. Instead of setting measurements individually...

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 220px;

...you can do it in clockwise sequence. The top measurement goes first, then the right, then bottom, then left:

margin: 0 0 0 220px;

  1. Save format.css.
  2. Reload index.html in the browser.

    It should look like this:

    The float:left property pushes the links area to the left, and allows the content area to come up alongside it.

    The 220-pixel left margin (margin: 0 0 0 220px) of the content area allows it to clear the 200-pixel-wide links area.