Не получается расположить элементы в ротаторе в ряд

[goodguy]

Здравствуйте! Сразу скажу, что я программист, не верстальщик, и заниматься версткой мне приходится крайне редко, но если приходится, это почти всегда превращается в каторгу. Для меня написать бэкэнд сайта или игры гораздо проще, чем сверстать хотя бы не очень навороченную страницу. Вот сейчас делаю сайт интернет магазина под ключ, все шло как по маслу, но в одном месте наткнулся на проблему, в решении которой мне не помог даже гугл. Из-за чего она происходит мне понятно, но как это обрулить, ума не приложу. 

В общем, к делу.

Мне нужно сделать ротатор в котором показываются похожие товары. Ну, это просто обычная "витрина" со стрелками по бокам, при нажатии на которые список товаром должен прокручиваться вправо и влево. 

 

Вот html код этого ротатора:

<div id="similar_offers_rotator_id">    <div class="similar_offers_arrow" id="similar_offers_left_arrow_id"></div>    <div class="similar_offers_arrow" id="similar_offers_right_arrow_id"></div>    <div id="similar_offer_items_cont_mask_id">        <div id="similar_offer_items_cont_id">        <ul>            <li>                <div class="sim_offer_item">                    <img src="img/simrotator/example.png">                    <a href="javascript:">Какая-то детская обертяйка, я бы со..</a>                    <p class="sim_price_p">234р<span class="grey_text"> /шт.</span></p>                    <div class="rating_stars similar_items_rating_stars rating7"></div>                </div>            </li>            <li>                <div class="sim_offer_item">                    <img src="img/simrotator/example.png">                    <a href="javascript:">Какая-то детская обертяйка, я бы со..</a>                    <p class="sim_price_p">234р<span class="grey_text"> /шт.</span></p>                    <div class="rating_stars similar_items_rating_stars rating7"></div>                </div>            </li>            <li>                <div class="sim_offer_item">                    <img src="img/simrotator/example.png">                    <a href="javascript:">Какая-то детская обертяйка, я бы со..</a>                    <p class="sim_price_p">234р<span class="grey_text"> /шт.</span></p>                    <div class="rating_stars similar_items_rating_stars rating7"></div>                </div>            </li>            <li>                <div class="sim_offer_item">                    <img src="img/simrotator/example.png">                    <a href="javascript:">Какая-то детская обертяйка, я бы со..</a>                    <p class="sim_price_p">234р<span class="grey_text"> /шт.</span></p>                    <div class="rating_stars similar_items_rating_stars rating7"></div>                </div>            </li>            <li>                <div class="sim_offer_item">                    <img src="img/simrotator/example.png">                    <a href="javascript:">Какая-то детская обертяйка, я бы со..</a>                    <p class="sim_price_p">234р<span class="grey_text"> /шт.</span></p>                    <div class="rating_stars similar_items_rating_stars rating7"></div>                </div>            </li>         </ul>                    </div>    </div></div>

Как вы видите, это unordered list в элементы которого добавлены дивы с содержимым. 

А вот css описание всего этого

/* SIMILAR OFFERS ROTATOR */#similar_offers_rotator_id {	-webkit-box-sizing: border-box; 	-moz-box-sizing: border-box;    	box-sizing: border-box;	position: absolute;	width: 745px;	height: 250px;	bottom: 20px;	left: 0;	right: 0;	margin: auto;	padding-top: 70px;	margin-top: 70px;	overflow: visible;	/*background-color: #929292;*/}.similar_offers_arrow {	width: 13px;	height: 22px;	position: absolute;	cursor: pointer;	cursor: hand;	top: 0;	bottom: 0;	margin-top: auto;	margin-bottom: auto;}.similar_offers_arrow:hover {	background-position: -13px;}#similar_offers_left_arrow_id {	left: 0;	background-image: url("../img/simrotator/sim_cont_left_arrow.png");	background-repeat: no-repeat;}#similar_offers_right_arrow_id {	right: 0;	background-image: url("../img/simrotator/sim_cont_right_arrow.png");	background-repeat: no-repeat;}#similar_offer_items_cont_mask_id {	position: absolute;	left: 0;	right: 0;	top: 0;	width: 700px;	height: 250px;	margin-right: auto;	margin-left: auto;	overflow: visible;}#similar_offer_items_cont_id {	position: absolute;}#similar_offer_items_cont_id ul {	display: inline-block;	list-style: none;	padding: 0;	margin: 0;	float: left;}#similar_offer_items_cont_id li {	float: left;    list-style: none;    	margin: 0px;	padding: 0px;	letter-spacing: 0;  	display: inline-block;  	width: auto;	height: auto;	top: 0px;}.sim_offer_item {	position: relative;	margin-right: 1px;	overflow: hidden;	padding: 0;	width: 174px;	height: 250px;	clear: right;	float: left;	margin: 0;	top: 0;	border-right: 1px solid #d2d2d2;	/*background-color: gray;*/	cursor: pointer;	cursor: hand;}

Вот так это выглядит

 

А мне нужно, чтобы они все выстроились в один ряд

Edited June 4, 2014 by goodguy

[npofopr]

Как то у вас все странно.

А вообще где то не хватает overflow:hidden; чтобы скрыть не нужные блоки.

А слайдер то сам работает? Обычно слайдеры по внутреннему содержимому эмулируют для себя длину в нужное кол-во внутренних вложенностей, ну и они скрываются тоже с помощью overflow: hidden;

[afdw]

http://jsfiddle.net/RVtT6/

[goodguy]

  On 6/4/2014 at 4:40 PM, afdw said:

http://jsfiddle.net/RVtT6/

Не, задать вручную ширину - это не решение. Мне нужно, чтобы она сама высчитывалась. Это конечно можно решить через JS, но кэп мне тут подсказывает, что можно обойтись голыми CSS

  On 6/4/2014 at 4:37 PM, npofopr said:

Как то у вас все странно.

Ну, не исключаю. Я не профессионал в верстке, поэтому и задал этот вопрос. А в чем, конкретно странность?

  On 6/4/2014 at 4:37 PM, npofopr said:

А вообще где то не хватает overflow:hidden; чтобы скрыть не нужные блоки.

Он там есть, просто я пока заменил на visible, чтобы видеть, где они физически располагаются

  On 6/4/2014 at 4:37 PM, npofopr said:

А слайдер то сам работает? Обычно слайдеры по внутреннему содержимому эмулируют для себя длину в нужное кол-во внутренних

Да. Слайдер писал сам, с ним проблем нет. Он отлично работает, если этому контейнеру задать ширину, например 2000px, то есть чтобы все элементы выстроились в ряд 

[npofopr]

  On 6/4/2014 at 4:56 PM, goodguy said:

Он отлично работает, если этому контейнеру задать ширину, например 2000px

дак слайдеры так и работают, только они длину автоматом выставляют. 

[goodguy]

Видимо действительно надо это в сам слайдер прописать, пусть устанавливает ширину родительского контейнера равную суммарной ширине всех детей . Сейчас на али экспресс посмотрел как у них слайдер работает у них там вообще в CSS ширина контейнера указана  5000%, а на сколько прокручивать уже считает сам слайдер. 

Ну, раз уж крутые компании так делают, то и я мудрить не буду) Спасибо всем откликнувшимся за участие

Edited June 4, 2014 by goodguy

[nerv]

  On 6/4/2014 at 4:17 PM, goodguy said:

Для меня написать бэкэнд сайта или игры гораздо проще

покажи, какие игры написал, интересно Edited June 4, 2014 by nerv

[goodguy]

  On 6/4/2014 at 5:52 PM, nerv said:

 

  On 6/4/2014 at 4:17 PM, goodguy said:

Для меня написать бэкэнд сайта или игры гораздо проще

покажи, какие игры написал, интересно

 

Лично мои (все 3 писал полностью, и клиент и сервер)

https://vk.com/beshenykon

https://vk.com/steel_fighter

http://vk.com/warfarex (отключил из-за нерентабильности, если будет время переделаю, но сейчас пока только скрины и видео можно глянуть)

Есть еще несколько проектов на андроид и ios. Но тут договор о неразглашении, так что извиняйте

Edited June 5, 2014 by goodguy