Welcome to WebmasterWorld Guest from 3.227.233.6

Forum Moderators: not2easy

Message Too Old, No Replies

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

Works as expected on desktop browsers, but not mobile

     
1:28 am on Dec 7, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1149
votes: 116


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]

2:14 am on Dec 7, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2662
votes: 794


It is very hard to see or reproduce the behavior of this given that it involves iframes. But from what you describe it sounds like the images don't have enough space to be displayed on a single "line". So it pushes or wraps the image to the next line and due to the float the next "line" is not determine by the height of the element, so it appears staggered.

My guess is that it is the width="275px" style on the image or div that appears as a child of id="show_pic", the div is second div in, and image is src="17134_0.jpg?h=20171206200249" .

I hope this helps!
6:06 am on Dec 7, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts:1149
votes: 116


Well, guys, this is one of those things I've been trying to figure out off-and-on for about a year, and just when I finally decide to ask for help... I fix it!

I don't know why, but adding a second clear: both stopped the unexpected wrapping:

<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>


I truly don't understand why; the only float: left tags are children of <div id="pic0">, and I already have a clear: both nested inside of it, so I don't understand why it continued to wrap. So the fix doesn't make sense, but it worked, so... yay?

If anyone wants to tackle explaining why this worked to me for the sake of education, I'd love to know it!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members