このレイアウトはスタイルシートを用いるのにもっとも適しています。構造的に特に問題も無いので簡単です。
<DIV ID="base"> <DIV ID="top"> 上 </DIV> <DIV ID="contents"> コンテンツ </DIV> <DIV ID="bottom"> 下 </DIV> </DIV>
まず3つのエリアを作ります。そしてこれらを囲むようにして、もうひとつ<DIV>を設置します。そしてbaseにスタイルを設定します。左右のマージンをautoにすることでセンター揃えになります。固定幅にするためにwidthを設定します。
#base { margin: 0 auto; width: 600px; text-align:left;}
※marginに関しては短縮形の設定法です。設定値が2個の場合 上下 左右 の値を設定したことになります。
基本的には先の設定で完成ですが、ブラウザのバグへの対処のために少し付け加えます。
BODY { text-align: center; } /* IE対策 */ #base { padding-right: 0.1px; } /* mozilla系対策 */
これを付け足して終了です。完成したレイアウトを見てみましょう。
次は左揃え伸縮自在幅レイアウトです>>