CSS: Width and Max-Width

Question

Why does:

width: 98%;
max-width: 1140px;

do the same as

width: 1140px;
max-width: 98%;

The first one make

Answer 1

The two options should essentially produce the same result, even with a width of less than 1140px, e.g. 500px:

In the first case:

width = min(98% * 500px, 1140px) = min(490px, 1140px) = 490px;

In the second case:

width = min(1140px, 98% * 500px) = min(1140px, 490px) = 490px;

However, there is a problem with certain browsers, in particular firefox 12.0, if you use the second option within a fieldset element. See here. Drag the browser window and you will notice that the first input element which uses percentage max-width doesn't respond correctly.

As such, please use the first option:

width: percentage;
max-width: pixels;