Fix sidenote example

Author: kojiishi

css-line-grid/Overview.html

@@ -259,15 +259,15 @@ <h3 id=context><span class=secno>1.1. </span>Background</h3>
     of text in a multi-column document.</p>
   </div>
 
-  <div class=figure>
+  <div class=figure id=ex-sidenote>
    <div class=sidenote-block>
     <div class=sidenote-body> Sidenotes (and footnotes for that matter) are
      often set at a smaller size to the basic text. This smaller text should
      still line up with basic text. Authors can achieve this effect by
      calculating appropriate font-size, line-height, and margins*.</div>
 
-    <div class=sidenote-note> Only if author controls everything. Can be
-     broken by user stylesheet, for instance.</div>
+    <div class=sidenote-note> Only if author controls everything. It can
+     easily be broken by user stylesheet, for instance.</div>
    </div>
 
    <p class=caption>Sidenotes set at a smaller size, but still line up with
@@ -609,7 +609,7 @@ <h3 id=grid-length-unit><span class=secno>3.3. </span>The &lsquo;<code
 <!-- --></code></pre>
   </div>
 
-  <div class=example id=gyou-dori>
+  <div class=example id=ex-gyou-dori>
    <p>East Asian layout often requires heights specified by the count of the
     line grids. In Japanese, this method is called Gyou-dori. Refer to <a
     href="#JLREQ" rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a> for more

css-line-grid/Overview.src.html

@@ -132,7 +132,7 @@ <h3 id="context">Background</h3>
     <p class="caption">Keep vertical rhythm through pictures and different size of text in a multi-column document.</p>
   </div>
 
-  <div class="figure">
+  <div id="ex-sidenote" class="figure">
     <div class="sidenote-block">
       <div class="sidenote-body">
         Sidenotes (and footnotes for that matter) are often set
@@ -144,7 +144,7 @@ <h3 id="context">Background</h3>
       </div>
       <div class="sidenote-note">
         Only if author controls everything.
-        Can be broken by user stylesheet, for instance.
+        It can easily be broken by user stylesheet, for instance.
       </div>
     </div>
     <p class="caption">Sidenotes set at a smaller size, but still line up with basic text.</p>
@@ -436,7 +436,7 @@ <h3 id="grid-length-unit">The ''<span class="index" title="length unit::gd">gd</
 <!-- --></code></pre>
   </div>
 
-  <div id="gyou-dori" class="example">
+  <div id="ex-gyou-dori" class="example">
     <p>East Asian layout often requires heights specified
       by the count of the line grids.
       In Japanese, this method is called Gyou-dori.