title: Expand an <a> tag to fill the space
body: <p>How can I make the anchor tag expand to the bottom of the list item?
  I know I could put the anchor round the list item tag, but that breaks XHTML 1.0 Strict compliance, so I cannot do it.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        #listWrapper { text-align:center;}
        #list { margin-left: 0px auto; margin-right: 0px auto; width: 100%; min-height: 100%; height:100%; margin-bottom: 10px; margin-top: 0px;}
        #list ul { padding: 5px 10px 10px 10px; margin: 0; min-height: 100%;}
        #list li { clear:both; font-weight:bolder; height:auto; border-bottom: 1px solid Silver; border-left: 1px solid Silver; font-size:x-small; border-right: 1px solid Silver; list-style-type: none;}
        #list a:hover { background-color: red;}
        #list a { display:block; cursor:pointer; text-decoration: none; text-align:left; vertical-align:top; }
        #list h3 { background-color:Silver; vertical-align:top; font-size:larger; }
        #list img { height:auto; margin: 8px; float:left; vertical-align:top; border:solid 1px Silver;}   
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="listWrapper"&gt;
        &lt;div id="list"&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;h3&gt;title&lt;/h3&gt;
              &lt;a href="#"&gt;
                &lt;img src="/images/x.jpg" alt="" /&gt;
                Lorem ipsun........
              &lt;/a&gt;
              &lt;div style="clear:both;" /&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;h3&gt;title&lt;/h3&gt;
              &lt;a href="#"&gt;
                &lt;img src="/images/x.jpg" alt="" /&gt;
                Lorem ipsun........
              &lt;/a&gt;
              &lt;div style="clear:both;" /&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>