Cross Selling Layout Problem

[yabarush]

Hi, I am using the cross selling module and it works well, except that rather than displaying the item one next to each other, it shows them one below each other.
 
I saw a previous post on this where the css was not loaded but it is not my case as the css is loaded (it is also in module -> position -> displayHeader).
 
So I have no idea what I am doing wrong. 
 
Please see below the css and tpl file below...I made some small changes to have it in bold and similar stuff...is there anything I am missing?
 
Thanks a lot for your help!
Lorenzo
 
CSS:

#crossselling h2.productscategory_h2 {
margin:40px 0 20px 0;
padding:10px 0;
border-bottom:1px solid #ccc;
font-size:18px;
color:#333
}
 
#crossselling {overflow:hidden}
 
#crossselling ul {text-align:center;list-style:none}
#crossselling li {
float:left;
    margin:5px;
    width:168px;
    height:250px;
}
#crossselling li a.lnk_img {display:block}
#crossselling li a img {border:1px solid #ccc}
#crossselling li p.product_name {text-align:center}
 
#crossselling_list {
list-style:none;
    overflow: hidden;
    width: 125px;
    text-align:center;
    font-weight: bold;
}
 
#crossselling_scroll_left,
#crossselling_scroll_right {
background: url('img/thumbs_left.gif') no-repeat center;
text-indent: -3000px;
display: block;
width: 9px;
height: 18px;
float: left;
margin-top: 30px
}
#crossselling_scroll_right { background-image: url('img/thumbs_right.gif') }
 
 

 
 
TPL:
 
 

{if isset($orderProducts) && count($orderProducts)}
<div id="featured-products_block_center" class="block products_block clearfix">
<script type="text/javascript">var cs_middle = {$middlePosition_crossselling};</script>
<p class="title_block">{l s='Customers who bought this product also bought:' mod='homefeatured'}</p>
<div id="{if count($orderProducts) > 5}crossselling{else}crossselling_noscroll{/if}">
{if count($orderProducts) > 5}<a id="crossselling_scroll_left" title="{l s='Previous' mod='crossselling'}" href="javascript:{ldelim}{rdelim}">{l s='Previous' mod='crossselling'}</a>{/if}
<div id="crossselling_list">
<ul {if count($orderProducts) > 5}style="width: {math equation="width * nbImages" width=107 nbImages=$orderProducts|@count}px"{/if}>
{foreach from=$orderProducts item='orderProduct' name=orderProduct}
<li>
<a href="{$orderProduct.link}" title="{$orderProduct.name|htmlspecialchars}" class="lnk_img"><img src="{$link->getImageLink($orderProduct.link_rewrite, $orderProduct.id_image, 'home_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$orderProduct.name|escape:html:'UTF-8'}" /></a>
<a href="{$orderProduct.link}" title="{$orderProduct.name}">{$orderProduct.name}</a>
{if $crossDisplayPrice AND $orderProduct.show_price == 1 AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}
<span class="price_display">
<span class="price">{convertPrice price=$orderProduct.displayed_price}</span>
</span><br /><p></p>
{else}
<br />
{/if}
<!-- <a title="{l s='View' mod='crossselling'}" href="{$orderProduct.link}" class="button_small">{l s='View' mod='crossselling'}</a><br /> -->
</li>
{/foreach}
</ul>
</div>
{if count($orderProducts) > 5}<a id="crossselling_scroll_right" title="{l s='Next' mod='crossselling'}" href="javascript:{ldelim}{rdelim}">{l s='Next' mod='crossselling'}</a>{/if}
</div>
</div>