Контент с тенью. Альтернатива табличной верстке
 

В общем, надо сделать, чтобы какбы на странице был контент, который был бы скажем шириной 500пикселов и был по центру страницы в браузере.
И надо, чтобы по бокам влево и вправо он отбрасывал тени.

Вот такое:
[img]http://oi41.tinypic.com/155sz2g.jpg[/img]

Сверстано оно на данных момент с пом. таблицы. Три столбика левый с фоновой картинкой и правый с той же фоновой картинкой (PNG).

Вот его код. Все просто.
[code]
<table align="center" width="500" cellspacing="0" cellpadding="0">
<tr>
<td width="50" style="background-color:#aaaaaa; background-image:url(docShade.png) ; background-position:32px 0px; background-repeat:repeat-y">&nbsp;</td>
<td align="center" style="border:2px solid #bbbbbb; background:#888888 url() repeat scroll left top">2<br>-<br>-<br>-<br>-<br>-<br>-<br>-</td>
<td width="50" style="background-color:#aaaaaa; background-image:url(docShade.png) ; background-position:-18px 0px; background-repeat:repeat-y">&nbsp;</td>
</tr>
</table>
[/code]

Вопрос: как лучше всего заменить это дело дивами и получить такой же эффект?

В общем, пока что сделал вот такое:
[code]
<div style="width:500px; background-color:#aaaaaa; background-image:url(docShade.png) , url(docShade.png) ; background-position:0px 0px, 100% 0px; background-repeat:repeat-y, repeat-y; margin-bottom:19px ; margin-left:auto ; margin-right:auto ">
<div style="border:3px solid #bbbbbb; background:#888888; margin-left:18px ; margin-right:18px "><br>1<br>2<br>3<br>4<br>4<br>5<br></div>
</div>
[/code]


Получилось вроде бы то же самое.
Интересует, являеццо ли ето наиоптимальнейшим вариантом для достижения достигнутого?

если использовать Image bg - то пойдет, но можно и box-shadow, а картинку для старинных броузеров использовать только

[quote=Ipro;31457112] если использовать Image bg - то пойдет[/quote]
считаете, что это самый оптимальный вариант?

ЗЫ
2-Ipro >
box-shadow имхо рано еще.

ИЕ, козлина, как всегда отличился.
Не понимает он таких вот выкрутасов с фоном, типа
background-image:url(docShade.png) , url(docShade.png) ; background-position:0px 0px, 100% 0px; background-repeat:repeat-y, repeat-y;

расставил фоны мозаикой, скотина.
прридется наверное всунуть все в еще один див, чтобы в одном диве была тень налево, а в другом диве- тень направо.

[link=оптимальный вариант]http://g.zeos.in/?q=%D1%82%D0%B5%D0%BD%D1%8C%20css[/link]

[url=оптимальный вариант]http://g.zeos.in/?q=%D1%82%D0%B5%D0%BD%D1%8C%20css[/url]

[url=http://g.zeos.in/?q=%D1%82%D0%B5%D0%BD%D1%8C%20css]оптимальный вариант[/url]

На хабре был вариант кроссбраузерной тени
[url]http://habrahabr.ru/post/94799/[/url]

[url]http://css3gen.com/box-shadow/[/url]
перекрывает полностью все потребности в тени

5-reason >6-reason >7-reason >
читай №3

8-Monty1 >
хай воно сказыться =)))

вы определитесь уже - под какие браузеры и какие версии верстаете =)

12-droidman >
чисто цcc имхо еще рано делать, поетому картинками, как и было описано.

box-shadow работает в ie9+, все чтио ниже - делается картинкой. Все легко, просто и изящно.
А есть еще PIE, которые заменить картинку для старого гавна.