How to split screen into 2 divs and make compatible with cellphone?

Question

I'm using Joomla 3 and editing an application and trying to get it cellphone compatible. I'm using a div container with 2 div that will actas columns, example:

<div>
<div style="float:left; max-width:50%;">code for left</div>
<div style="float:right; max-width:50%;">code for right</div>
</div>

this will be HORRIBLE with any cellphone, i'm trying with an iPhone. Seems like the generated content inside the 2nd div exceeds the screen size or div width available and then overflow.

There is any way to split screen on mobile and show the "right div" below the "left div" on cellphone?

thanks in advance

Answer 1

You need to use a media query.

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

EXAMPLE :http://jsfiddle.net/Svqt5/ (resize the browser window to see the media query work)

source: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/