ヘッダー部分（id=header)の補足
h1要素で括った大見出しにトップページのリンクを貼ります。作成中のページがトップページなので、意味のないことをしているようですが、そこにリンクが貼られていることを閲覧者に印象付けるためにもやっておきましょう。また、h1要素で括った文字の大きさが少し大きすぎると思いますので、サイズ調整もしておきます。
<div id="header">
    <h1><a href="http://www.□□□.com">ホームページ名</a></h1>
</div><!-- /header -->
div#header {
    height: 80px;
    background: #fc9;
}
div#header h1 {
    margin: 0;
    padding: 20px;
}
div#header h1 a {
    font-size: x-large;
    text-decoration: none;
}
ナビゲーション（id=navi)の作成
ナビゲーションには「HOME」「BLOG」「BBS」「LINK」の４つの項目を作ります。マークアップは、リスト要素のulでタグ付けします。
ナビゲーションはリストであるという考えでul要素を使っています。もし、ナビゲーションも見出しであるという捉え方をするのであれば、h要素でマークアップしても良いでしょう。ただし、項目が３つも４つもある場合はul要素を使うのが自然ですね。
<div id="navi">
    <ul>
        <li class="home"><a href="index.html">home</a></li>
        <li class="blog"><a href="blog">blog</a></li>
        <li class="bbs"><a href="bbs">bbs</a></li>
        <li class="link"><a href="link">link</a></li>
    </ul>
</div>

表示画面

さらに、li要素にクラスセレクタで名前を付けています。idセレクタで名前を付けても構いませんが、クラスで名づけるのが一般的です。表示画面では、リスト要素の<li>はブロックレベル要素なので、縦に表示されています。これをCSSで横に表示させるよう、次の項目で設定します。
見出しの文字サイズを「font-size: large」と設定したので、ブラウザによっては、文字の表示が微妙に異なっているはずです。これは各ブラウザによって、フォントを大きくするという解釈が違うからです。これを嫌うのであれば、フォントサイズの単位をpxにするのが一番ですが、pxやptなどの絶対指定をしてしまうと、ブラウザ上で文字の大きさを変更させることができなる場合もあります。
ナビゲーションのCSS設定
縦に表示されているナビゲーション項目を横に表示させます。CSSのfloatを使って、その設定を行います。
div#navi {
    height: 28px;
    background: #fc9;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
}
div#navi ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
div#navi ul li {
    float: left;
    padding: 0 25px;
    border-right: 1px solid #999;
    line-height: 28px;    /* 垂直に中央表示（div#naviの高さに合わせる） */
}

表示画面

今回は「float:left;」で回り込みをさせて横に表示させました。これ以外にもli要素をインライン化（display: inline;）させて横に並べる方法もあります。どちらかというと前者の方が、カスタマイズやりやすいのでお勧めです。
コンテンツ（id=content)の作成
「div#content」の中に入っている「div#menu」と「div#main」の２つのボックスをfloatを使って横並びさせます。イメージとしては、下の図のような感じです。片方だけ回りこみ（float）させても同じようなレイアウトを作ることは可能ですが、今回はそれぞれに「float:left;」、「float: right;」を指定して行います。こちらの方が、レイアウトの崩れる心配が少ないからです。

回りこみ画像

<div id="content">
    <div id="menu">
        <dl>
            <dt>MENU<dt>
            <dd>
                <ul>
                <li>メニュー１</li>
                <li>メニュー２</li>
                <li>メニュー３</li>
                </ul>
            </dd>
        </dl>
    </div><!-- /menu -->
    <div id="main">
        <h2>
            <img src="image/tori.gif" alt="トップ絵" width="500" height="100 />
        </h2>
    </div><!-- /main -->
</div><!-- /content -->
/* ---------- content ---------- */
div#content {
    clear: both;    /* ナビゲーションのフロートリセット */
    padding: 20px;
}
div#content div#menu {
    float: left;
    width: 200px;
    background: #fcc;
}
div#content div#main {
    float: right;
    width: 500px;
}
/* ---------- menu ---------- */
div#content div#menu dl {
    margin: 0;
    padding: 0;
}
div#content div#menu dl dt {
    padding: 8px
    background-color: #fcc;
    font-weight: bold;
    text-align: center;
}
div#content div#menu dl dd {
    margin: 0;
    padding: 0;
}
div#content div#menu dl dd ul {
    margin: 0;
    padding: 0;
}
div#content div#menu dl dd ul li {
    padding: 8px 12px;
    border-bottom: 1px solid #fff;
    background-color: #c99;
    list-style-type: none;
}
/* ---------- main ---------- */
div#content div#main h2 {
    margin: 0;
    padding: 0;
}
/* ---------- menu、main共通 ---------- */
div#content div#menu,
div#content div#main {
    margin-bottom: 20px;
}
それぞれマージン20pxを設定しています。問題なのは、メニューとメイン部分の境界のマージンですが、これは全体の横幅760pxから内容領域を差し引いて意図的にマージンを作っています。
回り込み（float）を両方のボックスに設定しているため、div#menuとdiv#mainには回り込むものが無い状態です。そのため、それらを包み込んでいるdiv#contentの高さが算出されません。これはCSSの仕様です。なので、div#contentとdiv#footer間に余白を作りたい場合、注意が必要です。ここでは、div#menuとdiv#mainにそれぞれ下にマージンを設定し、div#footerとの余白を作ることにします。div#contentがちゃんと２つのボックスを包み込むためには、クリアフィックス(clearfix）というCSSテクニックがありますが、今回は省略します。

　表示画面

上の表示画面は、div#contentにborderを設定しています。div#menuとdiv#mainが包含されていないのが確認できます（パディングの上下20px分だけ領域ができている）。

■表紙絵
鳥絵

■表示画面
表示画面

前述した通り、「div#content」は「div#menu」と「div#main」を包み込んでいませんので、div#footerに記述している「：」が意図していない場所にきてしまっています。これは次に設定するdiv#footerで回り込みの解除を行えば、大丈夫です。
表示画面はIE6.0ですが、これは仕様とは異なる表示です。本来なら白の背景はmenuのところまで伸びてきません。
フッター（id=footer)の作成
フッターは、上のボックスの「div#menu」と「div#main」のフロートをクリアする役割が大きいです。とりあえず、ここでは著作権表示を書いておきましょう。これでひとまず完成としておきます。
<div id="footer">
    <p>Copyright (C) All rights reserved.</p>
</div>
div#footer {
    clear: both;
    border-top: 1px solid #999;
    text-align: center;
}
div#footer p {
    margin: 0;
    padding: 5px;
}
■表示画面
表示画面