Category images wrapping on homepage

[Guest alt]

Hi,

I'm a complete novice, so please be gentle! (And explain everything as if to a rather dim child.)

I have recently added a MOD to Cubecart 3 that lets you display categories on the homepage, all well and good, but I need to make them scroll horizontally (don't ask - the design requires it). I have created a JavaScript that scrolls divs horizontally with all the necessary custom graphics, and this works fine, but the category images that are placed on the page (in a div on the PAGE_CONTENT area) wrap to the div despite the fact that I've created a css rule with "white-space:nowrap" for the div.

Here's the code in "skins/mySkin/styleTemplates/content/index.tpl" that does the homepage_cats_loop:

<!-- Starting HomePage Categories - MarksCarts http://cc3.biz/ -->

<!-- BEGIN: homepage_cats -->

<div class="boxContent">

<span class="txtContentTitle"><!--Browse Our Categories--></span>

<div id="wn">

<!-- BEGIN: homepage_cats_loop -->

<div class="homeCats" style="float: left; white-space: nowrap; text-align: center; position:relative; width: 820; height:200; overflow: hidden; margin:5px;"><a href="index.php?act=viewCat&amp;catId={TXT_LINK_CATID}" class="txtDefault"><span class="homeCats" style="float: left; white-space: nowrap; text-align: center; position:relative; width: 820; height:200; overflow: hidden; margin:5px;"><a href="index.php?act=viewCat&amp;catId={TXT_LINK_CATID}" class="txtDefault"><img src="{IMG_CATEGORY}" alt="{TXT_CATEGORY}" border="0" title="{TXT_CATEGORY}" /></a></span></a>

<!--<a href="index.php?act=viewCat&amp;catId={TXT_LINK_CATID}" class="txtDefault">{TXT_CATEGORY}</a>-->

</div>

<!-- END: homepage_cats_loop -->

<br clear="all" />

</div>

<br clear="all" />

</div>

What I need is to make the images flow without wrapping at all so that the div never has more than one row (if you see what I mean).

Can anyone help?