min-height with absolute positioning

Question

I have an area on my page #topLeft which has a minimum height set to it.

Within #topLeft I have a section #heroBanners that I wish to anchor to the bottom of #topLeft - using position:absolute; bottom:0;

At first this works fine, however when #topLeft should expand it is not and the heroBanner section simply overlaps the content above it.

I am assuming the problem is called by mixing a min-height with absolute positioned content?

Any ideas how to get round this, code below:

<div id="topLeft">
<div class="linksBox"> 
<ul>
<li>Item 1</li>
<li>Item2 </li>
<li>Item 3</li>
<li>Item4 </li>
</ul>
</div>
<div id="#heroBanners">

</div>

</div>

#topLeft {margin:0 27px 27px 0;  width:478px; min-height:378px; *height:378px; *margin-bottom:22px; position:relative;}

#heroBanners {bottom:0; position:absolute;}

Answer 1

It would be quite easy if you put both blocks or divs in a new div and set its style to {bottom:0; position:absolute;} instead of heroBanners.

<div id="parent">
<div id="topLeft">
<div class="linksBox"> 
<ul>
<li>Item 1</li>
<li>Item2 </li>
<li>Item 3</li>
<li>Item4 </li>
</ul>
</div>
<div id="#heroBanners">

</div>

</div>
</div>
#topLeft {margin:0 27px 27px 0;  width:478px; min-height:378px; *height:378px; *margin-bottom:22px; position:relative;}

#parent {bottom:0; position:absolute;}