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

In your first example

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

you are telling the browser to give a width of 98% of the screen, but not bigger than 1140px.

In your second example,

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

you are telling the browser to give a width of 1140px but not larger than 98% of the browser.

But, in the second instance, your screen size would need to be smaller than 1140px for the max-width value to kick in.

Also note that max-width is buggy in many older versions of IE.

Read more here: http://reference.sitepoint.com/css/max-width