My layout consists of two columns, with data on the left and navigation on the right. While it renders correctly on Safari desktop, Safari for iPhone displays the right column at the bottom of the page underneath the data. Here is the basic code template:
<body>
<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>
</div>
<!-- Column 1 end -->
</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>
The issue persists regardless of the viewport width being set to 100%.
Below is the CSS used:
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;
}
/* Styles for header */
#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 color */
}
.rightmenu .colleft {
right:25%; /* Right column width */
background:#fff; /* Left column background color */
}
.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;
}