Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

› WebAssist Forums › General / Announcements › CSS › Viewing Floats on a cell phone

Viewing Floats on a cell phone

Thread began 9/14/2009 7:01 am by julie383376 | Last modified 9/14/2009 10:09 am by julie383376 | 2489 views | 2 replies |

9/14/2009 7:01 am | #1 julie383376

Viewing Floats on a cell phone

First, I'm still learning CSS, and while my knowledge has grown in leaps in bounds, I overlook small details sometimes :)

My site is www.wble101.com. I'm pretty happy with the layout right now - it's a frames layout, with some CMS on selected pages. The top frame is fine, but I'm having a problem on one particular page that appears in the bottom frame: the Local News page.

This page has two columns of text (each in their own div): the first one is community news, the second one is church news. Before the closing div tag for church news (which is the last div before the footer), I have a "clear float" class applied to a <br /> tag.

While I haven't concentrated on formatting the pages for viewing on a cell phone, I would still like it to work! When I view the Local News page on my iPhone, the two text columns all float to the left and the footer comes up underneath the top frame.

I have tried the two floats both floating left, and I've tried it with the community news floating left, and the church news floating right - the footer still pops up top!

Any ideas? I'm not sure if I need to attach the CSS or the php page, but I'll be happy to if anyone needs it to help diagnose this...

Thanks for your help,

~Fergie

9/14/2009 9:33 am | #2 Justin Nemeth

Instead of using a br and clear float, you can try applying 'overflow: hidden' to your #container div. That is an alternate (and cleaner) way to clear the floated elements. I am not sure why the page wouldn't work well on an iPhone. You can test using safari or chrome since they both run webkit just like the iPhone, and see if that reveals anything.

9/14/2009 10:09 am | #3 julie383376

Darn Floats

Thanks for your help, Justin!

I tried that, but the iphone still wasn't happy.

That whole thing about applying a clear float to the br is from a Dreamweaver sample layout, and I'm not really sure how to use it. The comment says that it's to be applied div or br elements...

However, what I did that worked was to put clear: both in the #footer div. It worked, but I always worry that solutions I use will start the dominos falling!

Thanks again!

~Fergie

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now. Build a store, a gallery, or a web-based email solution.