divなしで可変幅の両側にドロップシャドウ

html要素は可変幅で中央寄せしてあり、 html要素に左側用の影画像が、body要素に右側用の影画像が指定してあります。

<html>
～（略）～
　　<body>

　　</body>
</html>

html {
 width: 90%;
 margin: auto;
 background: #eee url(shadow-left.gif) top left repeat-y;
}

body {
 background: #fff url(shadow-right.gif) top right repeat-y;
 margin-left: 5px;/* 左側用影画像の幅 */
}

ただしこの方法では、IE6でうまくいきません（標準、互換いずれのモードでも）。また、body要素とひとつのdivでやろうとしても、IE6の後方互換（Quirks）モードでうまくいきません（初期コンテナブロックを生成する要素の幅を指定できないバグのため）。

また、html要素に対して背景が指定してありますが、CSS2仕様書には、HTML文書の場合, 文書作成者がHTML要素ではなくてBODY要素に関して背景を指定することを推奨する。との記述があります。

2007年8月16日　可変幅で両側にドロップシャドウ（div一重で） :てんぽ