Mobile Safari rendering CSS differently - any fix?
===

I have a two column layout (data on left and nav on right). Renders correctly on Safari desktop but on iPhone the right column is rendered at the bottom of the page.
Basic code template is:

    <div class="colmask rightmenu">
    <div class="colleft">
    <div class="col1">
    <!-- Column 1 start -->
    <div class="ui-body ui-body-e">

    <div data-role="collapsible" data-collapsed="true" data-theme="e" data-content-theme="b">
    some data here	</div>
 
    <!-- Column 1 end -->
    </div>
    </div>
    <div class="col2">
    <!-- Column 2 start -->
            
    <div class="ui-body ui-body-b">
    nav stuff here
    </div>
    <!-- Column 2 end -->
    </div>
    </div>
    </div>
    </body>

Problem is the same whatever the viewport width is set at (currently 100&%)

Here is the CSS:
    body {
	margin:0;
	padding:0;
	border:0;
	width:100%;
	background:#fff;
	font-size:90%;
    }
    a {
	color:#369;
    }
    a:hover {
	color:#fff;
	background:#369;
	text-decoration:none;
    }
    h1, h2, h3 {
	margin:.8em 0 .2em 0;
	padding:0;
    }
    p {
	margin:.4em 0 .8em 0;
	padding:0;
    }
    img {
	margin:10px 0 5px;
    }
    #ads img {
	display:block;
	padding-top:10px;
    }

    /* Header styles */
    #header {
	clear:both;
	float:left;
	width:100%;
    }
    #header {
	border-bottom:1px solid #000;
    }
    #header p,
    #header h1,
    #header h2 {
	padding:.4em 15px 0 15px;
	margin:0;
    }
    #header ul {
	clear:left;
	float:left;
	width:100%;
	list-style:none;
	margin:10px 0 0 0;
	padding:0;
    }
    #header ul li {
	display:inline;
	list-style:none;
	margin:0;
	padding:0;
    }
    #header ul li a {
	display:block;
	float:left;
	margin:0 0 0 1px;
	padding:3px 10px;
	text-align:center;
	background:#eee;
	color:#000;
	text-decoration:none;
	position:relative;
	left:15px;
	line-height:1.3em;
    }
    #header ul li a:hover {
	background:#369;
	color:#fff;
    }
    #header ul li a.active,
    #header ul li a.active:hover {
	color:#fff;
	background:#000;
	font-weight:bold;
    }
    #header ul li a span {
	display:block;
    }
    /* 'widths' sub menu */
    #layoutdims {
	clear:both;
	background:#eee;
	border-top:4px solid #000;
	margin:0;
	padding:6px 15px !important;
	text-align:right;
    }
    /* column container */
    .colmask {
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	clear:both;
	float:left;
	width:100%;			/* width of whole page */
	overflow:hidden;		/* This chops off any overhanging divs */
    }
    /* common column settings */
    .colright,
    .colmid,
    .colleft {
	float:left;
	width:100%;
	position:relative;
    }
    .col1,
    .col2,
    .col3 {
	float:left;
	position:relative;
	padding:0 0 1em 0;
	overflow:hidden;
    }
    /* 2 Column (right menu) settings */
    .rightmenu {
	background:#eee;		/* right column background colour */
    }
    .rightmenu .colleft {
	right:25%;			/* right column width */
	background:#fff;		/* left column background colour */
    }
    .rightmenu .col1 {
	width:71%;			
	left:27%;			/* (right column width) plus (left column left padding) */
    }
    .rightmenu .col2 {
	width:21%;			
	left:31%;			
    }
    /* Footer styles */
    #footer {
	clear:both;
	float:left;
	width:100%;
	border-top:1px solid #000;
    }
    #footer p {
	padding:10px;
	margin:0;
    }
