title: css block links and images
body: <p>Given this html:</p>
  
  <pre><code>&lt;div class="nation"&gt;
      &lt;a href="library.php?type=nation&amp;amp;id=America"&gt;
          &lt;div class="nation-image"&gt;
              &lt;img src="nations/America.png" alt="snip" /&gt;
          &lt;/div&gt;
          &lt;h3&gt;America&lt;/h3&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the following CSS results in the entire <code>&lt;div class="nation"&gt;</code> becoming a clickable block link:</p>
  
  <pre><code>.nation {float: left; text-align: center; width: 189px;}
  
  .nation img {width: 160px; margin: 10px 0 0 0; border: 1px solid #16160C;}
  </code></pre>
  
  <p>but if I make the following single addition:</p>
  
  <pre><code>.nation {float: left; text-align: center; width: 189px;}
  
      .nation-image {height: 138px;}
  
  .nation img {width: 160px; margin: 10px 0 0 0; border: 1px solid #16160C;}
  </code></pre>
  
  <p>to specify the height of <code>&lt;div class="nation-image"&gt;</code> then the image (and only the image) is no longer a link, but the rest of the div (margin around it, <code>h3</code> etc) remain a block link.</p>
  
  <p>I am confused.</p>