how to keep multiple images on the same line inside a div with undeneath scroll bar

Hi i have a div that i set the with a width i want to have a scroll bar under
i have multiple images that i want all to be in one line but everytime the images run out space in the line it goes under i have tried float left but the image still goes under is there a way of keep in the same line inside a scrollable i am trying to avoid tables?

    <div style="width:830; background-color:white; height:120px; overflow:scroll; overflow-x: scroll;overflow-y: hidden;">
      
      <img style=" float:left; display:inline" src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
      <img style=" float:left; display:inline"  src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
      <img style=" float:left; display:inline"  src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
      <img style=" float:left; display:inline"  src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
      <img style=" float:left; display:inline"   src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
      <img style=" float:left; display:inline"   src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
      

    </div>

Code (markup):

 

why do not you just use simply jquery images slider or so ?

 

No its ok i just add another div and set width 100% and worked fine but thanks for taking the time to look at respond