float: left not working like expected, could use a second set of eyes

This seems to work fine on all of my desktop browsers, but not my mobile browsers, so I'm hoping you guys can suggest the problem.

Here's the code:

<div id="pic0" style="height: 35px; padding: 10px">
 <p style="float: left; width: 220px">
 Upload a Photo:
 </p>

 <div style="float: left">
 <input type="hidden" name="pic0" value=''>
 <iframe id="iframe_pic_0" src="../cgi-bin/upload_image.cgi" width="350" height="35" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
 </div>
 <div style="clear: both"></div>
</div>

The iframe is a Perl script that uploads the photo, resizes it appropriately, then shows it back on the browser.

On desktop browsers the images are shown in block elements, as expected. But on mobile browsers the images appear to be floating beside of one another.

I tried wrapping the IFRAME with DIV tags (eg, <div><iframe...></div>), but that had no impact. I also set a style="max-width: 350px" to the DIV that is already wrapping the IFRAME, but that also had no impact.

Here is the output of the IFRAME (be gentle, I wrote this in 2013):

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Upload an Image</title>
 // removed JavaScript that I think is irrelevant
</head>

<body bgcolor="#FFFFFF" style="border: none; text-align: left">

<div id="mod_back" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none">
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%" style="position: absolute; background: #FFF; top: 0; left: 0; width: 100%; height: 100%; filter:alpha(opacity=85); opacity: 0.85; -moz-opacity:0.85">
 <tr><td>&nbsp;</td></tr>
</table>

<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%">
 <tr><td align="center"><img src="loading.gif" width="90" height="16" border="0"></td></tr>
</table>
</div>

<div id="get_height">
<form name="upload" action="cgi-bin/upload_image.cgi" method="POST" enctype="multipart/form-data">
<input type="hidden" name="process" value="process_post">

<table cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td>
 <div id="show_pic">
 <div style="border: 1px outset #A4A43A">
 <div style="background:#7B97E1; width: 275px; height: 17px; padding: 1px" align="right">
 <a href="#" onClick="changeBack('delete'); document.upload.deleteBool.value='17134_0.jpg'; document.upload.submit(); return false">
 <img src="close_window.png" width="15" height="15" border="0">
 </a>
 </div>

 <div><img src="17134_0.jpg?h=20171206200249" width="275" height="259" border="0"></div>
 </div>
 <br>
 </div>
 </td>
 </tr>

 <tr>
 <td>
 <p id="pic_title" style="color:#000000"> </p>
 </td>
 </tr>
</table>
</form>
</div>

</body>
</html>

[edited by: phranque at 7:04 am (utc) on Dec 7, 2017]
[edit reason] missing tags [/edit]

<div id="pic0" style="height: 35px; padding: 10px"> <p style="float: left; width: 220px"> Upload a Photo: </p> <div style="float: left"> <input type="hidden" name="pic0" value=''> <iframe id="iframe_pic_0" src="../cgi-bin/upload_image.cgi" width="350" height="35" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> </div> <div style="clear: both"></div> </div> // This fixed it <div style="clear: both"></div>

float: left not working like expected, could use a second set of eyes

Works as expected on desktop browsers, but not mobile

csdude55

NickMNS

csdude55

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week