Few problems with website & ipad. would really appreciate some help

I can't link the actual website but can link it to you privately
so you can see the coding.

Problem 1: Ipad.

on a contact page, I have an image on the left, and text on the right, using
<div class="left">sdjsjdjsdh</div>
<div class="right">ksdjsakjdhjh</div>
with css
.left {float:left; width:50%}
.right {float:right; width:50%}

On internet explorer/firefox/safari on pc it looks perfect.

but on an ipad, the text overlaps the image on the left. Im unsure how to go about this.

Problem 2: Horizontally scrolling images, Ipad..
I've used <div id="viewport"> </div>
for a horizontally scrolling images, works perfectly apart from ipad, cannot scroll across with fingers, the page has no flash or even java. just html, so im unsure why this isn't working.

Problem 3: Rollover images ipad,
on another page i have another horiztonally scrolling images, but with some images to have rollover to click on, works perfectly online etc, apart from on ipad.
used
<div id="content">
<div id="motioncontainer" class="c2">
<div id="motiongallery" class="c1">
<div id="trueContainer"><!---->
rollover code. Not sure why these don't work on ipad either?


Problem 4: I've tried to fix a footer to the bottom of the page with a sticky footer, but it doesn't seem to be working..


If anyone can help with either of these problems, it's much appreciated, thankyou!