Mobile CSS, create two columns

Question

User-1482891610 posted

Hi

I am developing a website that shoudl work on a mobiel device, I want to create a simple page which as two colums (news paper style) usings CSS.  But the problem I have is that the text in the 2nd div wraps over the first div  if no text is in teh first div.  Below is the code

<span style="float:left; ">This is on one line</span>
<span style="float:left;">This is on multiple<br />lines <br />which is the problem<br /></span>

In IE 7 this shows as two columns, which do not wrap

However on a amobiel device it shows as:

This is one line      This is on multiple
lines
which is the problem


I would like it to look lik the below

This is one line      This is on multiple
                            lines
                            which is the problem

 Any ideas what im doing wrong?

 Man thanks in advance


 

 

Answer 1

User-1398621922 posted

post your css

Answer 2

User-1482891610 posted

Hi

 The CSS I am using is in the above, its just two very basic lines, which work fine in a web browser but not on a mobile device.

 I thought maybe "display:block;" might fix it but it didnt

 

Answer 3

User1634317999 posted

Hello,

it looks like you are using Pocket IE or IEMobile for testing. If this is the case I would recommend to use a table instead of a CSS layout. With other mobile browsers like S60 your code will work.

Answer 4

User-1482891610 posted

Hi

 Yes you are correct im using the Mobile Device Emulators in VS 2005 (Pocket PC 2003 and Smartphone 2003)

Is there no way I can use CSS?  I am trying to make the site totally CSS and not have any tables. 

Do you mind if I ask what a S60 browser is, I would be greatful for any other emulators I should be using

Many thanks in advance

Answer 5

User1634317999 posted

Hello,

in my experience you will not have much luck with Pocket IE or IEMobile and CSS layout if you try to construct multi-column layouts. You should also consider that emulators don't display pages like real devices. Therefore it is the best to test on a real device.

Device manufacturers deliver emulators. You can find them on their web pages.