title: Prevent div containing image to resize when text added
body: <p>I have a <code>div</code> centered in the site and containing a picture. The <code>div</code> extends its <code>height</code> to fit the picture as expected. Then I add some text and I expect it to lay out on the bottom of the <code>div</code>. But in addition to that the <code>div</code> also resizes a little bit so its <code>height</code> is <code>higher</code> than the <code>height</code> of the picture. Here is the exmaple:</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="siteContent"&gt;
      &lt;img class="debug" src="../../Content/themes/base/images/pageTitle.png" /&gt; 
      &lt;span&gt;
          aaa
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body
  {
      margin: 0;
  }
  .siteContent
  {   
      width: 960px;
      margin-left: auto;
      margin-right: auto;
      border: thin solid;
  }
  .debug
  {
      border: thin solid;
  }
  </code></pre>
  
  <p>The result:
  <img src="https://i.stack.imgur.com/7NsyX.png" alt="enter image description here"></p>
  
  <p>The unwanted effect is marked red.</p>
  
  <p>I was able to fix this for IE 8 and Firefox by modifiing the CSS like this:</p>
  
  <pre><code>body
  {
      margin: 0;
  }
  .siteContent
  {   
      width: 960px;
      margin-left: auto;
      margin-right: auto;
      border: thin solid;
      position: relative;
  }
  .siteContent span{
      position: absolute;
      bottom: 0px;
  }
  .debug
  {
      border: thin solid;
  }
  </code></pre>
  
  <p>After runnig this I got the right result in Mozilla:</p>
  
  <p><img src="https://i.stack.imgur.com/zGu6z.png" alt="enter image description here"></p>
  
  <p>However this does not work for Chrome and Safary. <strong>How can make it work for all major browsers ?</strong></p>