[css-values] Simplify the % section a bit.

Author: tabatkins

css-values/Overview.bs

@@ -661,21 +661,13 @@ Percentages: the <<percentage>> type</h3>
 	It corresponds to the <<percentage-token>> production
 	in the <a href="http://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> [[!CSS3SYN]].
 
-	Percentage values are always relative to another value,
+	Percentage values are often 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 <a>containing block</a>).
-
-<h4 id='dimension-percentage'>
-Percentages Relative to Other Values</h4>
-
-	In some cases, <<percentage>>s are interpreted relative to a <a>dimension</a> or <<number>>,
-	such as a <<length>>.
-	When this happens, <<percentage>>s and <a>dimensions</a>/<<number>>s can combined in ''calc()'' expressions.
-
 	While such "relative" percentages are often indicated in prose,
 	they can also be indicated with an explicit grammar term,
 	one for each basic <a>dimension</a> type:
@@ -696,6 +688,20 @@ Percentages Relative to Other Values</h4>
 	:: Equivalent to <code class=prod>[ <<number>> | <<percentage>> ]</code>,
 		where the <<percentage>> will resolve to a <<number>>.
 
+	<div class="example">
+		For example, in the 'width' property <<percentage>> values are relative to the width of the containing block.
+		If the containing block is ''1000px'' wide,
+		then ''width: 500px;'' and ''width: 50%'' have the exact same behavior.
+		This means that ''width: calc(500px + 50%);'' is allowed--
+		it has the same behavior as ''width: calc(500px + 500px)'',
+		which is an easy length+length calculation.
+
+		On the other hand, the second and third arguments of the ''hsl()'' function are bare <<percentage>>s,
+		not relative to any other value.
+		They cannot be combined with anything in ''calc()''
+		(except themselves, in useless expressions like ''calc(10% + 20%)'').
+	</div>
+
 <h3 id='dimensions'>
 Numbers with Units: <a>dimensions</a></h3>