Не получаются стили для карусели

Хочу изменить дизайн карусели товаров на сайте http://srv23440.ht-test.ru/
-сейчас кнопки расположены сверху, но мне необходимо по бокам.
Для этого я создал 3 div и поместил их в контейнер, левый div для левой кнопки, правый для - правой, центральный для самой карсуели товаров. И вроде бы все ок, но все страшно съезжает. На каком этапе я совершил ошибку?

Исходный код

<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<script type="text/javascript" src="/modules/mod_topmovie/assets/jquery.tinycarousel.min.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('.zoocarousel').tinycarousel({ display: 2 });
});


</script>
<link rel="stylesheet" href="/modules/mod_topmovie/tmpl/carusel.css" type="text/css" />
<link href="carusel.css" rel="stylesheet" type="text/css">

<div class="zoocarousel"> <img src="/modules/mod_topmovie/assets/l-arrow.png" class="prev" style="cursorointer;" alt="Назад"> <img src="/modules/mod_topmovie/assets/r-arrow.png" class="next" style="cursorointer;" alt="Вперед">
<div class="viewport">
<ul class="overview">
<?php
foreach ($positions as $item) {
$src = '/modules/mod_raxo_allmode/tools/tb.php?src=/'.$item['image'].'&w=130&h=90&zc=0';
echo '<li style="width: 190px; text-align: center;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;">';
echo (isset($item['image'])) ? '<img class="cimage" src="'.$src.'" alt="img"/><br/>':'';
echo "<p id=\"names\">" . $item['name'] . "</p>";

echo (isset($item['price'])) ? $item['price'].'<br/>':'';
echo '</li>';
}
?>
</ul>
</div>
</div>

Новый код (с кнопками по бокам)

<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<script type="text/javascript" src="/modules/mod_topmovie/assets/jquery.tinycarousel.min.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('.zoocarousel').tinycarousel({ display: 2 });
});


</script>
<link rel="stylesheet" href="/modules/mod_topmovie/tmpl/carusel.css" type="text/css" />
<link href="carusel.css" rel="stylesheet" type="text/css">

<div class="maincarusel">
<div class="lblock"><img src="/modules/mod_topmovie/assets/l-arrow.png" style="cursorointer;" alt="Назад"> </div>
<div class="mblock">
<ul class="overview">
<?php
foreach ($positions as $item) {
$src = '/modules/mod_raxo_allmode/tools/tb.php?src=/'.$item['image'].'&w=130&h=90&zc=0';
echo '<li style="width: 190px; text-align: center;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;">';
echo (isset($item['image'])) ? '<img class="cimage" src="'.$src.'" alt="img"/><br/>':'';
echo "<p id=\"names\">" . $item['name'] . "</p>";

echo (isset($item['price'])) ? $item['price'].'<br/>':'';
echo '</li>';
}
?>
</ul>
</div>
<div class="rblock"><img src="/modules/mod_topmovie/assets/r-arrow.png" style="cursorointer;" alt="Вперед"></div>
</div>

Стили

@charset "utf-8";
/* CSS Document */

.zoocarousel {
height: 250px;
width: 900px;
overflow:hidden;
}
.zoocarousel .viewport {
float: left;
width: 900px;
height: 250px;
overflow: hidden;
position: relative;


}
.zoocarousel .buttons {
display: block;
margin: 0px 0px 0 0;
float: left;
}
.zoocarousel .next {
margin: 0px 0 0 0px;

}
.zoocarousel .prev {
margin-top: 0px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0px;
}
.zoocarousel .disable {

opacity: 0.7;
filter: alpha(opacity=70);
moz-opacity: 0.7;
khtml-opacity: 0.7;
}
#names {
color: #FFF !important;
padding: 5px;
text-decoration: none;
background-color: #8a8a8a;
background-image: url(/modules/mod_topmovie/assets/caruselbg.gif);
min-height:52px;
background-repeat: repeat-x;
background-position: top;
margin-top: 0px;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
font-size: 11px;
font-weight: bold;
}

#names a:hover
{color: #CCC !important;
}
#names a:link
{
color: #FFF !important;
text-decoration: none;
}

#names a:active
{
color: #FFF !important;
text-decoration: none;
}



.zoocarousel .overview {
list-style: none;
position: absolute;
padding: 0;
margin: 0;
left: 0;
top: 0;
}
.zoocarousel .overview li {
float: left;
margin: 0 20px 0 0;
padding: 1px;
height: 121px;
width: 236px;
list-style: none;}

.carusel2 {

width: 190px; text-align: center;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 15px; }

.cimage {
text-align:center;
height: 90px;
border: 2px solid #CCC;
width: 90px;
padding-top: 10px;
padding-right: 48px;
padding-bottom: 10px;
padding-left: 48px;
}

.maincarusel {
width: 980px;
clear: both;
position: relative;
overflow: hidden;
height: 250px;
float: left;
}
.lblock {
position: relative;
height: 250px;
width: 40px;
float: left;
overflow: hidden;
}

.mblock {
position: relative;
height: 250px;
width: 900px;
float: left;
overflow: hidden;
}
.rblock {
position: relative;
height: 250px;
width: 40px;
float: left;
clear: right;overflow: hidden;
}