Css positioning


Not sure if this is possible using just css, or whether I have to use javascript as well.

I have a website, that I want to add a css file for viewing in mobile devices. The structure is as follows: Header, content, footer. The content section has three divs: as follows: floated left, floated right, and the other div stays in the center. For mobile viewing, I want all divs to flow below each other, floated left stays at the top, the center div comes next, then the div floated right comes at the bottom. However, it doesn’t work out right, as it flows as left, right and then center. Absolute positioning does not work as the right div comes on top the center div. I cannot use specific margin attributes as both width and height of divs are variable.

Any ideas, for css only, to get it to flow as left, center and then right?


You can specify a stylesheet for mobile deviced, but sadly a lot of those devices ignore this style sheet. Here is one way to set it up:

<link type="text/css" media="screen" rel="stylesheet" href="screen.css">
<link type="text/css" media="handheld" rel="stylesheet" href="mobile.css">

You can also experiment with handheld views in Opera, which has a nice view for that.

Perhaps the best thing would be to post your code / page and we can look at what behavior it is getting up to.


Sounds like the quiz I set for the iphone a couple of months ago.

Goes something like this.[URL=“http://www.pmob.co.uk/temp/iphone-final.htm”]