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

Question

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 when 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.

Answer 1

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.

Answer 2

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.