Background color of div only extends to bottom of h2 within div?

Question

I am trying to create a row using Zurb Foundation on my site. For this row, I would like the background color to be red. For some reason, the background-color is only being applied to the h3 element inside the row. How can I make it so that the background color is applied to the whole row?

HTML:

<div class="redBG">
    <h3>NUMBERS</h3>
    <div class="large-4 columns"><a title="1" href="#"><img src="http://blognumbers.files.wordpress.com/2010/09/1.jpg" alt="1"></a></div>
    <div class="large-4 columns"><a title="2" href="#"><img src="http://blognumbers.files.wordpress.com/2010/09/2.jpg" alt="2"></a></div>
    <div class="large-4 columns"></div>
</div>

CSS:

.redBG {
    background:red;
}

Here's a JSFiddle

Thanks!

Answer 1

Try adding overflow: hidden to the container div. This will then allow it to wrap the containing div's

.redBG {
    background: red;
    overflow: hidden;
}