How to make only one line list wider than screen?
===

I have a list, which length is variable,it could have 4 items or 30 items. 

The issue is that this list is being rendered as a marquee, through a Javascript that is working, but items reach the screen width and then they pass to next line.

I want to have all the items on the same line, so then I could move the list to recreate the marquee effect. 

![What I have and What I want][1]


  [1]: http://i.stack.imgur.com/ROmIW.jpg

    <div class="submenu-container">
	<div id="agrupador">
	 <ul style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;" class="submenu" id="moverlo">
           <li> Item </li>
           <li> Item </li>
           <li> Item </li>
           <li> Item </li>
           <li> Item </li>
           <li> Item </li>
         </ul>
        </div>
    </div>

        .submenu-container {
    	background:#F0F7FF;
    	border-bottom:1px silver solid;
    	width: 100%; 
    	overflow: hidden;
    }
    
    .submenu li {
    	display: inline-block;
    	margin-left:4px;
    	background:none;
        *display: inline; /* IE */
        float:left;
    }
    
    .submenu {
    	margin:0;
    	padding-top:8px;
    	padding-bottom:8px;
    	padding-left:0;
    	padding-right:0;
    	clear:none;
    	width:auto;
    	float:left;
    }

And with javascript: 

    function ClonarAvisos(){
	var width = alertSize(); // Usable window width
	var xVarScreen = width - $('moverlo').getWidth();
	alert($('moverlo').getWidth());
	$('moverlo').setStyle({ width: $('moverlo').getWidth() + xVarScreen });
	$('agrupador').setStyle({ width: $('moverlo').getWidth() * 2 });
	var clon = Element.clone('moverlo', true);
	clon.id = 'moverlo2';
	$('agrupador').insert(clon);
}

    function MoveNoticias(p) {
	//Función que imita el comportamiento del Tag "marquee"
	new Effect.Move('agrupador', {
	    x: -3,
	    y: 0,
	    mode: 'relative',
	    duration: 0.1,
	    afterFinish: function() {
		    var offSetDistance = $('agrupador').offsetLeft ;
		    offSetDistance = Math.abs(offSetDistance);
		    var gettingWidth = $('moverlo').getWidth() ; 
		    if ( offSetDistance >= gettingWidth ) {
	    		Element.setStyle('agrupador', {left: '0px' });
		    }
	    	MoveNoticias();
	    }
	});
	}


I hope you understand what I am trying to do! Thanks!