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;

Answer 2

Probably in your first case 98% is equal or more than 1140px, so it will stick at 1140px.

In the second case of course, the width is 1140px, so it will stick to 1140px, and the max-width become useless.

Update Try it here http://jsfiddle.net/

Answer 3

If you set a fixed width and a max-width, this means the following:

If the width goes above max-width, keep it at max-width. If the width is below max-width, keep it on width.

It will never go over the max-width, that doesn't mean it can't stay under, the max keyword obviously indicates a limit and not a rule.

Answer 4

Use only

max-width: 1140px;

or

width: 98%;

not both. If you want to see the difference go here.

Answer 5

here is how I understand them .. they are 2 boxes -> width and max -width .

width can't exceed max-width if so width has no effect . like wise if you defined max-width lower than width .. width has no effect .

at anytime your browser converts your % into most likely pixels yet the rules above still apply .

examples :

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

this is translated to :

width : 1960px;
max-width : 1140px;

this means -> only max width applies .

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

this is translated to :

width : 1140;
max-width : 1960px;

this means -> width is 1140 but can't exceed 1960 .

Answer 6

From my understanding of the properties:

if width > max-width use max-width
if max-width > width use width

Therefore, using your example, this must mean that 1140px is strictly less than 98% at the screen resolution you are viewing at.

Shrink your browser screen and you will get different results.

It's somewhat unrelated, but I've found max-width (and the corresponding property max-height) to be a problem with images in Internet Explorer, and found this to be helpful in coaxing it to use the correct values:

img {
    max-width: 150px;
    max-height: 120px;
    width: auto !important;
    height: auto !important;
}

Without the last two properties, most standard-compliant browsers correctly maintain aspect ratio, but Internet Explorer will not unless you do that.

Edit: It looks like I've said basically the same answer as everyone else.