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

width - this css property used to set the width(fixed width), the width is fixed in this case.

Example: .property-set{ width: 200px; }

This set fixed width i.e 200px

max-width - this css property is used to set width but in this width may be less than what the value is set, but max limit is the value that set by user.

Example: .property-set{ max-width: 200px; }

This set max width i.e 200px which means width may be less than 200px but not more than 200px

Thanks..

Answer 2

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

Answer 3

Assuming that the container is your browser window, if you are on a 1280 px screen resolution then 98% would be 1254 px, which is still greater than 1140 px. So you see no difference. Try moving to lower resolution such as 1024px