I have a element that is acting as a container, and I have set a background color for it. The problem is if I dont specify a height the element does not get big enough to hold all of the things that it is suppose to be containing

Here is the HTML

<div id="pod_header">
<img src="/pd/images/header_projectdesigns.png" />
<br />

<!--Who we are-->
<div class="info_pod">
<p class="large_font">
Who We Are
</p>
<p>
<img src="/pd/images/solution_graphics/q_mark.png" class="left" />
Project Designs is your all in one web design solution. We take you from concept to design to completion, leaving you worry free. We work very closely with our clients to deliever them exactly what they want. To see some of our other work, please visit our <a href="/pd/portfolio.html" class="header">Portfolio</a>. 
</p>
</div>
<!--END-->


<!--What we do-->
<div class="info_pod">
<p class="large_font">
What We Can Do For You
</p>

<p>
<img src="/pd/images/solution_graphics/we_do.png" class="left"/>
No matter what your web design needs are, we have a solution for you. We have a wide range of services to offer you, whether you need a basic blog, or a complex commerce site. We also do logo, and graphic design. Project Designs is very flexiable when working with you. We can do partial or complete redesigns, or build one from scratch.
</p>
</div>
<!--END-->

<!--Services list-->
<div class="info_pod">
<p class="large_font">
Services
</p>
<ul>
<li>Basic to Complex Web sites</li>
<li>E-Commerce</li>
<li>Content Management Systems</li>
<li>XHTML</li>
<li>CSS</li>
<li>Logo Design</li>
<li>Graphics/Banners</li>
</ul>
</div>
<!--END list-->

<!--Diagram-->

<div class="description">
<img src="/pd/images/solution_graphics/webdesignsolutions.jpg" class="solution_header" />

<p class="info3">
Concept Created by You
</p>
<a style="background-image: url(/pd/images/solution_graphics/concept.png);" href="/pd/concept.html" class="solution"></a>
<p class="info">
Find the Design Right For You
</p>
<a style="background-image: url(/pd/images/solution_graphics/design.png);" href="/pd/design.html" class="solution"></a>
<p class="info2">
Let Project Designs do the Rest
</p>
<a style="background-image: url(/pd/images/solution_graphics/completion.png);" href="/pd/completion.html" class="solution"></a>

</div>
<!--END Diagram-->


</div><!--END header-->

Here is the css

#pod_header
{
    border-bottom:#242424 solid thin;
    width:100%;
    height:550px;
    margin:10px 0;
    background-image: url(/pd/images/header_projectdesigns_bg.png);
    background-repeat: repeat-x;
    background-color:#393939;
    color:#FFFFFF;
}

Thanks

You MUST give your png file the proper width and height dimensions in the html.

Really?

I thought the width and height attribute for HTML was depreciated. Guess not Ill try that thanks

No, it is not deprecated, it is still necessary.

I never put a width/height for images in the img tag, and everything works out fine.

I never put a width/height for images in the img tag, and everything works out fine

Lucky you, but it is still recommended.