HTML & CSS In Pictures
Set content width
  1. In advlayout.html, surround the paragraphs in an area for the page's main content:

    <div id="maincontent">

    <p>Welcome to Tech Tool, the magazine for people who like gadgets.</p>

    <p>Every day, we cover the latest in electronic gadgetry.</p>

    </div>
  2. In layout.css, add formatting for the maincontent area:

    #maincontent {
    margin: 0;
    padding: 20px;
    }
  3. In advlayout.html, enclose everything between the <body> tags in the pagewidth area:

    <body>

    <div id="pagewidth">

    ...

    </div>

    </body>
  4. In layout.css, add formatting for the pagewidth area:

    #pagewidth {
    text-align: left;
    width: 700px;
    border-style: solid;
    border-color: #000000;
    border-width: 1px;
    }