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

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

<div id="wrapper">
　　<div id="container">

　　</div>
</div>

body {
 background:#eee;
}

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

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

divが二重になっているのが気になるところですが、二重のdivの代わりにhtml要素とbody要素を使う方法では、IE6でうまくいきません（標準、互換いずれのモードでも）。 また、body要素とひとつのdivでやろうとしても、IE6の後方互換（Quirks）モードでうまくいきません。 html(body)要素への幅指定が反映されないのです（初期コンテナブロックを生成する要素の幅を指定できないバグのため）。

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