увеличения блока при новедений

[BaukaKz]

Всем привет !

 

я новичок в этом деле сделал список товаров из блоков ДИФ дал им размер  и при методе Ховер сделал так что бы блок на которую наведен курсор стал больше

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

 

помогите решить проблему. как сделать ? или подскажите в какую сторону копать )))

 

хотел получить такой результат 

 

<ul><li><div id="price"><img class="price1"  src="price/obuv/789.png" width="250" height="115" alt="Прайс" /></div></li><li><div id="price"><img class="price1"  src="price/obuv/789.png" width="250" height="115" alt="Прайс" /></div></li><li><div id="price"><img class="price1"  src="price/obuv/789.png" width="250" height="115" alt="Прайс" /></div></li><li><div id="price"><img class="price1"  src="price/obuv/789.png" width="250" height="115" alt="Прайс" /></div></li><li><div id="price"><img class="price1"  src="price/obuv/789.png" width="250" height="115" alt="Прайс" /></div></li><li><div id="price"><img class="price1"  src="price/obuv/789.png" width="250" height="115" alt="Пра</ul>

и css стиль к нему 

        #content ul li #price { background-color:#fcfcfc;width: 225px;height: 270px;display: inline-block;overflow: hidden;float: left;margin: 6px 20px 14px 5px;}#content ul li #price:hover {box-shadow: 0 0 6px 2px #8f8d8d;}

[DivMan]

зачем в li вкладывать div? 

display: inline-block; и float: left; не совместимы

и дай весь код

[web-tech]

или подскажите в какую сторону копать )))

 

Для начала копните в сторону того, что не может быть шесть блоков с одним и тем же id.

[rus]

http://jsfiddle.net/wjfx2bqy/

[BaukaKz]

зачем в li вкладывать div? 

display: inline-block; и float: left; не совместимы

и дай весь код

https://dropmefiles.com/gDAXW

 

только я убрал код увеличение 

в коде который я вам отправил вот так 

 

#content ul li #price:hover {

  box-shadow: 0 0 6px 2px #8f8d8d;

 

должно быть 

 

#content ul li #price:hover {

  box-shadow: 0 0 6px 2px #8f8d8d;

  height: 305px;

Edited December 10, 2015 by BaukaKz

[BaukaKz]

http://jsfiddle.net/wjfx2bqy/

http://jsfiddle.net/hkq7ss4w/1/#&togetherjs=ezLjrieFc4

зачем в li вкладывать div? 

display: inline-block; и float: left; не совместимы

и дай весь код

 

http://jsfiddle.net/hkq7ss4w/1/#&togetherjs=ezLjrieFc4

Edited December 10, 2015 by BaukaKz