CSS width 100% or maximum width in pixels

Question

How can I create a CSS rule for a width that

• The default width is 100%.

• If the width is 100% greater than a certain pixel width (say 512 pixels), then the width is clamped to that pixel width

I'm not sure about the relationship between width and width, or how calc () is supported or can express it. This should work with the latest WebKit and Firefox 4 browsers. IE8 support, etc. Need not

Answer 1

This is actually the intended use of max-width . If the calculated (actual) width element exceeds max-width , it will be limited by the maximum value, and not beyond its limits. Percentage versus pixels does not matter.

Declare as in the same rule as this (no calc() function needed):

 #somediv { width: 100%; max-width: 512px; } 

Answer 2

If it blocks a level element, it should be 100% by default, so there is no need to declare a width, then max-width: 512px; will cut it

calc() not supported very well, but in this case I don’t think you need it

Answer 3

 div{ max-width: 512px; } 

should be enough.