CSS(スタイルシート)レイアウト:2カラム 1／ホームページ作成ビギナーズガイド

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

上にヘッダー、右にメインコンテンツ、左にメニューブロック、下にフッター、の2段組レイアウト。
divタグとCSS(スタイルシート)のfloatプロパティを使って作る方法を紹介します。

body {text-align:center; margin:0 auto;}

#outer {width:750px; text-align:left; margin:0 auto;}

#header {width:750px;}

#right {float:right; width:550px;}

#left {float:left; width:200px;}

#footer {clear:both; width:750px;}

<body>

<div id="right">右側の内容</div>

<div id="left">左側の内容</div>

</div>

</body>

表示例はこちら→サンプルページ（わかりやすいように背景色をつけてます。）