What you are experiencing is known as the 'clearfix problem'. Most browsers do not take floating children into account when calculating an elemnts height.
There is plenty of information out there about this. This might be a good starting point: What is a clearfix?
In your case, you can solve this in 2 ways.
Method 1:
add an none floating elemnt as a last child into your div, and give it a style of clear: both; Something like this:
<div>
<img/>
<h2>2 Bedroom Property For Sale</h2>
<h3>£1,234,567</h3>
<div style='clear:both;'></div>
</div>
The disadvantage of this method is that you are actually adding markup, just for the purpose of styling, which is considered bad practice. That is why i would go for method 2.
Method 2:
Make the parent div self clearing. This can be done by adding overflow:hidden;to it as suggested, but that my produce unwanted results. There are cases where you may want overflow, but still want to clear the div. That is why I have a clearfixclass in my standard stylesheet. It looks like this:
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
And you just need to apply it to the div like this:
<div class='clearfix'>
<img/>
<h2>2 Bedroom Property For Sale</h2>
<h3>£1,234,567</h3>
</div>
This is just an example of a clearfix class, there are many different ones out there. Yhis one seems to work fine for me however.
And an example demonstrating both techniques: http://jsfiddle.net/LGvgj/
