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

admin · Oct 10, 2022

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:

Code:

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

CSS:

Code:

.redBG {
    background:red;
}

<a href="http://jsfiddle.net/pjCWp/" rel="nofollow">Here's a JSFiddle</a>

Thanks!

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

admin

Administrator

Visitors Online