I have a parent div with the following style: max-width:600px; width:100%;
This contains two children left-floated divs with the following style: width:50%; max-width:300px; min-width:285px;float:left;
These children divs contain tables for my menu.

In iphone when I view this in landscape mode, these children divs are stacked in two rows, rather than coming in a single row, and hence they leave a lot of space on the side. As a result my template looks broken.

I want to set the properties of max and min width wrt device dimensions, rather than in pixels, so that this is fully responsive.

Any ideas on how this could be achieved?