I have a website that is fairly basic that displays perfectly on PC's, but on iPads and iPhones it appears to have a float issue which I can't figure out.

The layout is basically this:

<div id="navigation" style="float: left; width: 200px; height: 400px;"></div>
<div id="content" style="float: left; width: 800px; height: 600px;"></div>

The problem is that the content div clears the navigation div on the Apple devices, and shows up below it, while everywhere else it floats left alongside the navigation div like it should.

Any ideas on why this is happening?