文章の元はCL10 - 1段組＋リキッドレイアウト。
1段組、リキッドレイアウトでは、widthを指定する必要がほとんどない。よって、つまづく危険性は少ない。
ブラウザデフォルトのCSSの違いをあらかじめ減らしておく（ADP: ブラウザで見た目を調整するための最初のお約束）。
* {
margin: 0;
padding: 0;
line-height: 1.5;
font-size: 100%;
}必要な要素には、適宜指定しなおす。
p, ul, ol, dl, pre {
margin-top: 1em;
margin-bottom: 1em;
}
dd, #content li {
margin-left: 2em;
}文字の色は、黒にする場合でも#000000にしないほうがきれい（ADP: 本文のフォントサイズとカラー）。
body {
color: #333330;
}今回は、ロゴの下とフッターの上に、背景画像を横幅いっぱいに並べてみる。
この場合、背景画像を担当させる要素にpaddingとbackgroundを指定し、widthは指定しない（ADP: IE6のwidth解釈バグ対処法）。背景画像を担当させる要素より上位では、むやみにmargin/paddingを指定しない。
ロゴの下。
#logo {
background-color: white;
background-image: url(images/back001.gif);
background-position: bottom;
background-repeat: repeat-x;
padding: 20px 0 36px 24px;
}フッターの上。
#footer {
background-color: white;
background-image: url(images/back001.gif);
background-position: top;
background-repeat: repeat-x;
padding-top: 20px;
}その他のところは、個別に左右の余白を調整する。#navや#contentはボックスごとmarginを指定する。ロゴで横幅いっぱいに幅を使ってしまったので、h1や#breadcrumbsは、個別に設定する。フッターも横幅いっぱいに幅を使ってしまったので、フッターの子要素にmarginを指定し、孫要素以降のmarginを消す（ただし、フッター内でddやulのmarginを使いたい場合には注意が必要）。h1要素は、フォントサイズを大きくしたため、marginを少し減らすときれいにそろう（ADP: 左端をそろえるネタ）。
h1 {
margin-left: 22px;
margin-right: 22px;
font-size: 200%;
}
#breadcrumbs {
font-size: 80%;
padding: 2px 24px 3px 24px;
background-color: #dee4f7;
}
#nav, #content {
margin-left: 24px;
margin-right: 24px;
}
#footer * {
margin-left: 24px;
margin-right: 24px;
}
#footer * * {
margin-left: 0;
margin-right: 0;
}