I've made a really simple website for myself with basic HTML and CSS. The idea is to have one long horizontal scroll across the page. It works fine on my browser (Safari, Firefox, and Chrome) but when I open the page on my iPhone, it cuts the scroll off. In fact, it doesn't even show the scroll bar. You can see an example of what I am trying to accomplish here:

http://www.japihonoo.com/galleryvector.htm

I've been all over forums asking people what to do to fix it but no one seems to know how or respond. I don't have any developer friends to ask either. I don't know PHP, Ajax, or Java (and definitely don't want to use Flash). The goal was to make a very simple, clean site with minimal code to display my artwork.

I wonder, is it even possible to make it work?

The code I have right now looks something like this:

<div style="float:left; padding-left:15px;">
<a href="index.html"><img src="buttons/k_f_2.jpg" /></a>
<div style="float:left; padding-top:10px;">
<a href="graphics/wishbone.html"><img src="buttons/graphics.jpg" /></a>
<a href="illustration/corn.html"><img src="buttons/illustration.jpg" /></a>
<a href="sketchbook.html"><img src="buttons/sketchbook.jpg" /></a>
<a href="other.html"><img src="buttons/other.jpg" /></a>
<a href="contact.html"><img src="buttons/contact.jpg" /></a>
</div>
</div>

And the CSS Looks like this:

div.scroll
{background-color:#FFFFFF;
width:1400px;
height:580px;
overflow:auto;
white-space: nowrap;}

If you have any suggestions I would be incredibly grateful!