Css width above 100%

Question

Is correct to specify a width greater than 100% ?

.class{
    width: 102%;
}

Answer 1

Yes, as per the CSS 2.1 Specification, all non-negative values are valid for width, that includes percentage values above 100%.

Answer 2

Percentage values simply represent a percentage of the length of the element's container. A percentage over 100% is completely valid, however a percentage under 0% isn't (as 0% will always be equal to a length of 0).

Let's say you have a div element which has 100px width. Within that div element is a p element which you're putting a percentage width on, the following will occur:

width: 0%;                         // 0px (0% of 100px)
width: 10%;                        // 10px (10% of 100px)
width: 100%;                       // 100px (100% of 100px)
width: 110%;                       // 110px (110% of 100px)
width: 200%;                       // 200px (200% of 100px)
width: 1000%;                      // 1000px (1000% of 100px)

From the W3's CSS Values and Units Module Level 3:

A percentage value is denoted by <percentage>, consists of a <number> immediately followed by a percent sign ‘%’. It corresponds to the PERCENTAGE token in the grammar.

Percentage values are always relative to another value, for example a length. Each property that allows percentages also defines the value to which the percentage refers. The value may be that of another property for the same element, a property for an ancestor element, or a value of the formatting context (e.g., the width of a containing block). When a percentage value is set for a property of the root element and the percentage is defined as referring to the inherited value of some property, the resultant value is the percentage times the initial value of that property.