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

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

今回、左側用の影画像の幅は100pxで作ってあり、background-position:5%を指定することで、画像の左から5pxの部分（影の開始地点）とbodyの左から5%の位置を揃えます。

<body>
　　<div id="container">

　　</div>
</body>

body {
 background: #eee url(shadow-body.gif) 5% 0% repeat-y;
}

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

この方法なら、divの数をひとつ減らしつつ、IE6の互換モードでも（もちろん標準モードでも）うまくいきます。

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