title: IE (all versions) ignoring height when content overflows
body: <p><strong>Edit:</strong> I managed to get it to work on IE 8+9 using <code>&lt;meta http-equiv="X-UA-Compatible" content="IE=7" /&gt;</code> but the problem still persists in 6/7.</p>
  
  <p>I'm trying to achieve this effect:</p>
  
  <p><img src="https://i.stack.imgur.com/LJAwy.png" alt="example">
  <a href="http://img860.imageshack.us/img860/3905/example.png" rel="nofollow noreferrer">http://img860.imageshack.us/img860/3905/example.png</a></p>
  
  <p>Which I've managed to do in all browsers except IE (all versions including 9) without any extra markup:</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;p class="firstPara"&gt;Para1&lt;/p&gt;
      &lt;p&gt;Para2&lt;/p&gt;
      &lt;p&gt;Para3&lt;/p&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>And with this CSS:</p>
  
  <pre><code>#content {
  width: 700px;
  height: 232px;
  position: relative;
  background: #ccc url('assets/headerImage.png') left top no-repeat;
  }
  
  #content p {
  background-color: #fafafa;
  position: relative;
  top: 232px;
  width: 440px;
  padding: 10px;
  }
  
  #content p.firstPara {
  position: absolute;
  top: auto;
  bottom: 0;
  background: #eee url('assets/headerTextBack.png') left bottom no-repeat;
  }
  </code></pre>
  
  <p>In order to position the first paragraph I've opted to set it to absolute position and set the "bottom" property to 0, thus putting it at the bottom of the parent div who's height has been set to the same as the image. However in IE it seems that the height is completely ignored if the sum of the heights of the static/relatively positioned elements exceeds the specified height. As a result the first paragraph hangs down further than it should. Max-height and various fixes I found for it didn't seem to work.</p>
  
  <p>Anyway I'm at a loss, I can't seem to get it to work under IE at all unless I separate the first paragraph into a different div.</p>
  
  <p>Any help would be much appreciated!</p>