コンテンツを中央に配置する。 画面の横幅が変わってもコンテンツ幅は変化しない。 コンテンツが少なくても画面の最下端までコンテンツの背景色が表示されるようにするには、 body, html, コンテンツ領域のすべてをheight: 100%に指定する必要がある。

ヘッダ領域を付け加えている。 ヘッダ文字を中央揃えにしている。 高さ方向の書き出し位置はpadding-topプロパティの値で調節している。

横幅がナビ領域に等しく、高さが20px程度のgif画像を用意し、コンテンツ領域の背景画像とする。 画像をy方向にリピートする指定とすればナビ領域の背景色となる。 このままでは、コンテンツの文字がナビ領域に回りこんでしまう。

コンテンツの文字がナビ領域に回りこまないようにするには、コンテンツのナビ領域を除く領域を 新たにセクション領域としてそこにナビ領域分のmargin-leftプロパティを設定する。

ただし、文字が画面の最下端を超えるときは正しく背景色が現れない。