div一重で可変幅の両側にドロップシャドウ1

body直下にdivがあり、bodyは可変幅で中央寄せしてあり、 bodyに左側用の影画像が、#containerに右側用の影画像が指定してあります。

<body>
　　<div id="container">

　　</div>
</body>

html {
 background:#eee;
}

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

#container {
 background: url(shadow-right.gif) top right repeat-y;
}

ただしこの方法では、IE6の後方互換（Quirks）モードでうまくいきません。 body要素への幅指定が反映されないのです（初期コンテナブロックを生成する要素の幅を指定できないバグのため）。しかし、実はある工夫をすることで、HTML構造はそのままに、このレイアウトを実現できるのです。

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