Container BG not working right

HTML & CSS
1

Ok yall, I have been messing with this for hrs and cannot seem to get it working.

I have a BG image that I need to be in the div container and it is above everything else.

http://allfoodequip.com/quote/2/

It should look like this. (I changed colors to see if I was missing something)

http://i44.tinypic.com/vcebc.png

Any help would be greatly appreciate.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>



    <div id="container">
    &nbsp;
    <div id="header"></div><!--Closes header-->
<div id="topbar"></div><!--Closes topbar-->
             <div class="title">
                   <p class="hello">Hello Mr. Squiggles</p>
                   <p class="hello2">We are please to offer the following for your consideration:</p>
               </div><!--Closes title-->

          <div class="product">Recirculating Oven</div><!--Closes product-->


         <div id="quote">

             <div class="fields">

                <p>Quote # :</p>
                <p>Item :</p>
                <p>Inventory :</p>
                <p>Category :</p>
                <p>Manufacturer :</p>
                <p>Model :</p>
                <p>Condition :</p>
                <p>Deminsions :</p>
                <p>Description :</p>

             </div><!--Closes fields-->


             <div id="price">
                <p class="price">Skid Price :----------</p>
                <p class="price">Unit Price :----------</p>
        <img src="images/divider.png" width="375" height="7" />
                <p class="price2">TOTAL PRICE :----</p>
<p></p>
<p></p>
<p></p>

                   <div id="link">
                      <p class="link">Product Link</p>
                      <p class="link2">http://www.allfoodequip.com</p>
                   </div><!--Closes link-->

            </div><!--Closes price-->
     </div><!--Closes quote-->

<div id="divider"></div><!--Closes divider-->

<div id="pics">
  <img src="images/QUOTE_11.png" width="120" height="125" />
  <img src="images/QUOTE_11.png" width="120" height="125" />
  <img src="images/QUOTE_11.png" width="120" height="125" />
  <img src="images/QUOTE_11.png" width="120" height="125" />
  <img src="images/QUOTE_11.png" width="120" height="125" />
  <img src="images/QUOTE_11.png" width="120" height="125" />
  <img src="images/QUOTE_11.png" width="120" height="125" />
  <br />
   <img src="images/QUOTE_11.png" width="120" height="125" />
  <img src="images/QUOTE_11.png" width="120" height="125" />
  <img src="images/QUOTE_11.png" width="120" height="125" />
  <img src="images/QUOTE_11.png" width="120" height="125" />
  <img src="images/QUOTE_11.png" width="120" height="125" />
  <img src="images/QUOTE_11.png" width="120" height="125" />
  <img src="images/QUOTE_11.png" width="120" height="125" />
</div><!--Closes pics-->

<div id="divider"></div><!--Closes divider-->

<div id="contact">
           <p class="heading">How to contact us:</p>
      <div class="contactL">
             <p class="heading2">Visit us Online: www.allfoodequip.com</p>
             <p class="heading2">Contact: Dino Roberts</p>
             <p class="heading2">Direct Line: 615-788-2953</p>
             <p class="heading2">Email: dino@allfoodequip.com</p>
      </div><!--Closes conactL-->

      <div class="contactR">
            <p class="heading2">Visit us Online: www.allfoodequip.com</p>
            <p class="heading2">Contact: Dino Roberts</p>
            <p class="heading2">Direct Line: 615-788-2953</p>
            <p class="heading2">Email: dino@allfoodequip.com</p>
     </div><!--Closes contact-->
</div><!--Closes contact-->

<div id="footer"></div><!--Closes footer-->
</div><!--Closes container-->



</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */




#container {
	background-image:url(images/bg.png);
	width:980px;
	height:auto;
	margin: 0 auto;
}
	
#header {
	background-image:url(images/header.png);
	width:980px;
	height:162px;
	float:left;
	}
	
#topbar {
	background-image:url(images/topbar.png);
	width:980px;
	height:34px;
	float:left;
	}
	
.title {
	background-color:#00CC00;
	margin-top: 25px;
	margin-left: 25px;
	float:left;
	}
	
p.hello {
	background-color:#3CC;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 24px;
	}
	
p.hello2 {
	background-color:#33FFCC;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 18px;
	}
	
	
.product {
	background-color:#3F0;
	width:400px;
	height:25px;
	margin-left: 50px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 24px;
	font-weight: bold;
	color: #009;
	margin-top: 25px;
	float:left;
	}
	
#quote {
	background-color:#FF6600;
	width:900px;
	height:450px;
	margin-left:25px;
	float:left;
	}
	
.fields {
	background-color: #CCC;
	width:120px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-weight: bold;
	margin-left:50px;
	margin-top:30px;
	text-align:right;
	float:left;
	}
	
#price {
	background-color:#666666;
	width:380px;
	height:300px;
	margin-left:500px;
	margin-top:50px;
	}
	
.price {
	font-family: Verdana, Geneva, sans-serif;
	}
	
	
.price2 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #009;
	margin-right: 25px;
	}
	
#link {
	margin-top: 125px;
	text-align: center;
	
	}
	
p.link {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-decoration: underline;
	}
	
p.link2 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #00F;
	font-weight: normal;
	font-size: 18px;
	}
	

	
	
#pics {
	background-color:#06F;
	width:870px;
	height:auto;
	float:left;
	margin-left:50px;
	margin-top:15px;
	margin-bottom:10px;
	}
	
	
#contact {
	background-color:#0F0;
	width:800px;
	height:200px;
	margin-left:25px;
	float:left;
	}

.contactL {
	width:400px;
	height:200px;
	float:left;
	}
	
.contactR {
	width:400px;
	height:200px;
	float:left;
	}
	
p.heading {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #0000CC;
	margin-left: 25px;
	}
	
p.heading2 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	line-height: 10px;
	margin-left: 75px;
	}
	
	
	
#footer {
		background-image:url(images/footer.png);
		width:980px;
		height:130px;
		float:left;
		}

#divider {
	background-image:url(images/divider.png);
	width:850px;
	height:7px;
	float:left;
	margin-left:55px;
	}
2

Because everything within the container is floated the container dosnt extend itself. Overflow:auto; on the container should be enough to solve the problem.

Consider using a CSS reset too, it will help with cross browser issues and will normalise your browsers (removes padding and margin that browsers apply by default). Google Eric Meyer for a fair few articles on CSS resets.

3

I got it, I just added a Content <div>

I appreciate it