why does background-color fill only part of div?

Question

I have two headers enclosed inside one div. The div background color fills the first header but not the second. Why is this? I would assume that putting two divs inside one div would cause them to inherit the background color. I have done this before without problems. Thank you.

<div id="contain">


<header id="head_1">
    <img src="images/Logos/Actlogo.png"/>
   <p> P.O. Box 4524 </br>
       Wattville </br>
       </br>
       (203) 444 - 4444 </br>
        www.Acts4Peace.com
   <p>
</header>


<!-- menu and statement -->
<header id="head_2">
   <p>Keeping Families Warm in Winter</p>


    <ul>  <!-- main menu -->
        <li> <a href="#"> Furniture </a>
            <ul> <!-- submenu -->
            <li> <a href="#"> Couches </a></li>
            <li> <a href="#"> Chairs </a></li>
            <li> <a href="#"> Tables </a></li>
            </ul>
        </li>

        <li> <a href="#"> Clothing </a>
            <ul> <!-- submenu -->
            <li> <a href="#"> Women </a></li>
            <li> <a href="#"> Men </a></li>
            <li> <a href="#"> Kids </a></li>
            </ul>
       </li>

        <li> <a href="#"> Kitchen </a> 
            <ul> <!-- submenu -->
            <li> <a href="#"> Utensils </a></li>
            <li> <a href="#"> Blenders </a></li>
            <li> <a href="#"> Baking </a></li>
            </ul>
        </li>

    </ul>

</header>   

 #contain {   /* main wrapper */
    width: 1200px;
    background-color: tan;
    margin: auto;
 }


 #head_1 p {     /* mailing address floated right */
   float: right;
   text-align: right;
   font-size: 11pt;
 }


 @font-face {
    font-family: cursive;
    src: url(C:/Windows/Fonts/Cursive standard.ttf);
 }


 #head_2 p {    /*second header paragraph, business mission*/
    float: right;
    font-family: "cursive standard";
    font-size: 26pt;
 }

Answer 1

Instead of using the header tag twice, I would put the two elements in separate divs, withing one . Then change the background of either , or the two divs inside.

 <div id="contain"> <header> <div id="head_1"> <img src="images/Logos/Actlogo.png"/> <p> PO Box 4524 </br> Wattville </br> </br> (203) 444 - 4444 </br> www.Acts4Peace.com <p> </div> <!-- menu and statement --> <nav> <p>Keeping Families Warm in Winter</p> <ul> <!-- main menu --> <li> <a href="#"> Furniture </a> <ul> <!-- submenu --> <li> <a href="#"> Couches </a></li> <li> <a href="#"> Chairs </a></li> <li> <a href="#"> Tables </a></li> </ul> </li> <li> <a href="#"> Clothing </a> <ul> <!-- submenu --> <li> <a href="#"> Women </a></li> <li> <a href="#"> Men </a></li> <li> <a href="#"> Kids </a></li> </ul> </li> <li> <a href="#"> Kitchen </a> <ul> <!-- submenu --> <li> <a href="#"> Utensils </a></li> <li> <a href="#"> Blenders </a></li> <li> <a href="#"> Baking </a></li> </ul> </li> </ul> </nav> </header> </div> 

  #contain { /* main wrapper */ width: 1200px; background-color: tan; margin: auto; } #head_1 p { /* mailing address floated right */ float: right; text-align: right; font-size: 11pt; } @font-face { font-family: cursive; src: url(C:/Windows/Fonts/Cursive standard.ttf); } nav p { /*second header paragraph, business mission*/ float: right; font-family: "cursive standard"; font-size: 26pt; } header { background-color:#; } 

Answer 2

Although I can't recreate your issue (perhaps the window in JSFiddle isn't big enough), from your comment to Adam Ciardelli it appears this is a float issue. You can set overflow:hidden on .contain or use a clearfix:

#contain {   /* main wrapper */
  width: 1200px;
  background-color: tan;
  margin: auto;
  overflow: hidden;
}

FIDDLE