Welcome to WebmasterWorld Guest from 54.144.79.200

Forum Moderators: not2easy

Message Too Old, No Replies

floating divs not flowing on Android zoom

     

george93510

7:29 pm on Sep 12, 2011 (gmt 0)



I have a page with 3 floated columns. If I resize the window or zoom in, I want the floats to flow one underneath the other when the window isn't wide enough. This works in PC-type browsers, but on the Android text re-flows, but floated columns don't. So when I zoom in the right column(s) get cut off as if they were columns in a table.

How do I get this layout to flow on the Android? Will I have the same problem on iPhones?

My HTML:

<!DOCTYPE html>
.
.
.
<div class="col">
column 1 content
</div>

<div class="col">
column 2 content
</div>

<div class="col">
column 3 content
</div>


My CSS:

.col {
float: left;
margin-right: 25px;
}

alt131

8:51 am on Sep 16, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi george93510, and welcome to WebmasterWorld :)

I would expect the provided code to work as desired - have you double-double checked there is nothing else affecting the floats?

Also, what browser?

george93510

3:24 pm on Sep 16, 2011 (gmt 0)



It works as desired on Firefox and Internet Explorer. The problem is on the Android browser.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month