The margin-bottom property of the last div element does not "expand" the div

Question

I have an element in a div that has a background image. Below the div, I have another div with a different background image. Now the problem is that if the last element contained in the first div is applied by the margin-bottom application, there will be a gap between the two divs as follows:

Screenshot http://img40.imageshack.us/img40/5603/littlesnapperh.png

Notice the gray gap caused by the margin-bottom property of the h2 element contained in the first div. I know this can be resolved if I switch margin-bottom to padding-bottom, but what if I need to have a bottom edge?

How to fix it?

Answer 1

This is a function known as collapsing fields. See: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

The easiest way (in addition to replacing the pad with the padding, as you think) is to add a small (1px) invisible border or padding to the outer element.

Answer 2

Perhaps something is related to overflow: hidden or one of the elements that are not being cleaned properly. If you add overflow: hide until the first div, this may fix it.