CODEWITHSUNDEEP
css
Cameron
Cameron

Reputation: 28783

CSS: Width and Max-Width

Why does:

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

do the same as

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

The first one makes sense in that I'm saying the width is 98% but don't go larger than 1140px wide.

The second one however would say the page is 1140px wide but then WOULD go as large as the page at 98% right? So e.g past 1140px... but apparently not, as it does the same as the first.

Can someone explain why?

Upvotes: 24

Views: 43062

Answers (10)

ali safaeyan
ali safaeyan

Reputation: 165

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

This means width of the element should be 98% of its parent's width but not more than 1140px. so when the width of browser decreases the width of element shrinks and its width is always 98% but when the width of browser increases the width of element grows but not more than 1140px

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

This means when the width of browser is less than 1140px the width of element shrinks and its width is always 98% of its parent but when the width of browser increases the width of element grows but not more than 1140px

Upvotes: 0

mark borg
mark borg

Reputation: 9

Use only

max-width: 1140px;

or

width: 98%;

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

Upvotes: -1

Ahmed Eid
Ahmed Eid

Reputation: 4804

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 .

Upvotes: 1

Amol Udage
Amol Udage

Reputation: 3075

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

Upvotes: 0

anthony sottile
anthony sottile

Reputation: 69874

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.

Upvotes: 29

Question Overflow
Question Overflow

Reputation: 11255

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;

Upvotes: 1

Jason Gennaro
Jason Gennaro

Reputation: 34855

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

Upvotes: 5

Jose Faeti
Jose Faeti

Reputation: 12302

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/

Upvotes: 1

Kokos
Kokos

Reputation: 9121

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.

Upvotes: 7

Aziz Shaikh
Aziz Shaikh

Reputation: 16524

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

Upvotes: 3

Related Questions