How do I set a width for the mobile AND the desktop?

Right now, the width of my DIV is 100%. It's great on mobile. It stretches, and it doesn't require the user to scroll left or right. It just "fits".

However, on a big monitor...the DIV is stretched out, and all the stuff on float:left are to the left, whereas all the float:right are all the way to the right!

I would like a style solution for this. What attributes can I put in this div so that w开发者_开发问答hen people view it on the desktop, it maxes out at 500px (and still keep the stretchyness in mobile)?

By the way, I want the same template for mobile + desktop. (makes things easy)

Thanks.

Use the following CSS:

max-width: 500px;

As said in the other answer, it is not supported in earlier versions of Internet Explorer (<= 6 if I'm correct), but it works in most if not all mobile browsers, as most of them (iPhone, Android, Palm Pre) use the WebKit engine, and Opera Mini and Mobile also support it.

You are looking for max-width:

<div style="width: 100%; max-width: 500px"> 

should do the job.

It does not work in IE <= 6, though, and I don't know about mobile browser support - be sure to test. Quirksmode compatibility table

Update: Opera Mini and Safari Mobile definitely support it.