title
メインコンテンツ本文等
content 背景色：steelblue
（幅600ピクセル）
レイアウトの高さはこのメインコンテンツの行数によって変わります。
本文
本文
本文
本文
本文
本文
本文
本文
本文
本文
本文
本文
本文
本文
本文
本文
本文
本文
メニュー等
menu
（幅150ピクセル）
サブコンテンツの方がメインコンテンツの行数より少ない（メインコンテンツより高さが低い）と設定しています。
脚注
foot
管理者表記、動作環境、著作権、更新日など
上の例では上余白40ピクセル、中央配置のレイアウトになっており、下の記述例でもその指定をしています。
cssの指定の内、色のついた指定（数値、背景色、文字色）などは各自のデザインに合わせて適宜変更してください。
（ただし、
「サブコンテンツ(#menu)の幅＋メインコンテンツ(#content)の幅＝全体(#container)の幅」
になるよう注意すること。その他注意事項は各ページを参照。）
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>レイアウトサンプル</title>
<style type="text/css">
<!--
* { margin: 0; padding: 0; }
ブラウザによるレイアウト崩れを防ぐため、余白を全て0に指定。
#cover { margin-top:40px; text-align: center; }
上と左右の余白を調節するためのブロック用CSS。上余白40ピクセル、内部ブロック中央揃え（IE対策）。
#container { margin-left: auto; margin-right: auto; text-align: left; width: 750px; background-color: lightsteelblue; }
レイアウト崩れの防止、中央配置ブロック用のCSS。左余白自動、右余白自動、内容を左揃え（IE対策）、幅750ピクセル、背景はlightsteelblue(サブコンテンツの背景色として表示される)。
#title { background-color: steelblue; color: white; }
タイトル用指定。背景はsteelblue、文字色は白。
#content
{ float: right; width: 600px; background-color: aliceblue; }
メインコンテンツブロック用CSS。右寄せ、幅600ピクセル、背景はaliceblue。
#menu
{ float: right; width: 150px; }
サブコンテンツ用CSS。右寄せ、幅150ピクセル。
#foot
{ clear: right; background-color: steelblue; color: white; }
脚注ブロック用CSS。flatの解除、背景steelblue、文字色を白。
.inbox { padding: 10px; }
余白用ブロックのCSS。10ピクセルの余白を指定。
-->
</style>
</head>
<body>
<div id="cover">
IE用に余白を調節するためのブロック
<div id="container">
レイアウト崩れを防ぎ、ブロックを中央に配置するためのブロック
<div id="title">
タイトル用ブロック
<div class="inbox">
余白用ブロック。この中にタイトルの内容を記述</div>
</div>
<div id="content">
メインコンテンツ用ブロック
<div class="inbox">
余白用ブロック。この間にメインコンテンツの内容を記述</div>
</div>
<div id="menu">メニュー用ブロック
<div class="inbox">
余白用ブロック。この間にメニューの内容を記述</div>
</div>
<div id="foot">脚注用ブロック
<div class="inbox">
余白用ブロック。この間に脚注の内容を記述</div>
</div>
</div>
</div>
</body>
</html>