IE ignoring height of div if content is bigger

programming web dev
1

I’m trying to achieve the effect in the attached image.

Which I’ve managed to do in all browsers except IE 6/7 without any extra markup:

<div id="content">
    <p class="firstPara">Para1</p>
    <p>Para2</p>
    <p>Para3</p>
</div>

And with this CSS:

#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;
}

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.

Anyway I’m at a loss, I can’t seem to get it to work under IE 7/8 at all unless I separate the first paragraph into a different div. It only works on IE 8/9 if I stick this in:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Any help would be much appreciated!