CSS: Solution for negative margin-top in Chrome and Safari due to min-height

There are different reasons for negative margins not being translated properly in Chrome and Safari. This is a particular scenario that involves min-height. I had a div whose negative margin-top is not working in Chrome and Safari. Worked in Firefox, Opera and IE 9 but not working in Chrome and Safari. This is what I had:

<div id="top-div">
  <div class="container">
    <img src="image-link" />
  </div>
</div>

<div id="bottom-div">
  <div class="container">
    <p>text text text</p>
  </div>
</div>

The CSS for the above was like this:

#top-div .container {
  min-height:250px;
}

#bottom-div {
  margin-top:-50px;
}

Now the fix. All I had to do was add "height:100%" in "#top-div .container", like this:

#top-div .container {
 min-height:250px;
 height:100%; /* adding this does the trick for Chrome and Safari */
    }

Giving a fixed required height such as "height: 300px" might work as well (can't remember if I tried this), such as:

#top-div .container {
  height:300px;
}