Rozmarin

Не получается создать каталог элементов. Сверстал каталог для магазина со следующими характеристиками: 1. На DIV 2. Гибкие 3. 3 элемента в строке 4. Первый элемент (DIV) прижат к левой стороне родительского блока 5. Второй элемент (DIV) посередине 6. Третий элемент (DIV) прижат к правой стороне родительского блока 7. Элементов может быть сколько угодно много по 3 в строке Как правильно было бы реализовать данную задачу? Мои попытки: HTML <div id="product-list"> <h2 class="title">Заголовок</h2> <div class="product-item"> <div class="product-wrapper"> <div class="photo"> <img src="images/product-1.jpg" alt=""> </div> <div class="product-info"> <p class="desc">Медаль сувенирная</p> <p class="price">Цена: 400 руб.</p> <a class="btn-readme" href="#"></a> </div> </div> </div> <div class="product-item"> <div class="product-wrapper"> <div class="photo"> <img src="images/product-2.jpg" alt=""> </div> <div class="product-info"> <p class="desc">Медаль сувенирная</p> <p class="price">Цена: 400 руб.</p> <a class="btn-readme" href="#"></a> </div> </div> </div> <div class="product-item"> <div class="product-wrapper"> <div class="photo"> <img src="images/product-3.jpg" alt=""> </div> <div class="product-info"> <p class="desc">Медаль сувенирная</p> <p class="price">Цена: 400 руб.</p> <a class="btn-readme" href="#"></a> </div> </div> </div> .... </div> CSS #product-list { overflow: hidden; width:100%;}#product-list>.product-item { background-color: white; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; float: left; margin: 0 0 10px 0; width: 33.33%; text-align: center;}#product-list>.product-item>p,#product-list>.product-item>div { overflow: hidden;}#product-list>.product-item>.name { font: bold 14px/18px Arial; height: 35px; color: black;}.photo { max-height: 150px; max-width:110px; margin:10px auto 0;}.product-item>.product-wrapper { border: 3px solid #f4f4f4; padding: 5px; margin: 10px 0 0 0; height: 270px; position: relative; }.photo>img { width: 100%; height: 100%; max-height: 137px;}.product-info { position: absolute; bottom:0; left:0; width: 100%;}#product-list>.product-item .desc { font-size: 14px;}#product-list>.product-item .price { font-size:18px; font-weight:bold; margin-top: 5px;}#product-list>.product-item .button { margin-bottom: 0; overflow: visible;}

Возникла проблема с тенью (CSS3) для блока. Во всех последних браузерах все работает, однако IE8 и ниже ни в какую не желает появляться. Пробовал трюк с PIE.htc, однако тоже не получилось. Тень необходима для одной стороны (левой). Тень нужна вертикальная, имеет элиптическую форму, т.е. верхний и нижние части тени с сильным закруглением, посередине тень растягивается. Есть варианты это сделать с помощью 3 картинок? Помогите, пожалуйста. Посмотреть эскиз можно здесь: http://snap.ashampoo.com/UVcEmP0i