Welcome to WebmasterWorld Guest from 54.224.68.56

Forum Moderators: not2easy

Message Too Old, No Replies

floating divs not flowing on Android zoom

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

New User

5+ Year Member

joined:Sept 12, 2011
posts: 16
votes: 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;
}
8:51 am on Sept 16, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


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?
3:24 pm on Sept 16, 2011 (gmt 0)

New User

5+ Year Member

joined:Sept 12, 2011
posts: 16
votes: 0


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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members