Div height is messed up - css

Question

This is something I haven't experienced before, my div height isn't cooperating in CSS & is throwing off the whole flow of a page. The div is supposed to be centered, 960px wide, approx 1000px height & 150px of padding on the bottom to separate it from my footer.
Website Link: http://tinyurl.com/b8vvhgr
HTML
<div id="energyrating-desc">
<h1><span class="gray">Energy Audit Services</span></h2>
<img src="/nd/images/yellow-bar.jpg" width="960" height="2" style="padding-bottom:2px;"></img>
<p>According to the EPA Energy Star program, the average American household spends $1,500 annually on
energy bills - a number that may go up as much as 50% this year.
</p>
<br>
<p>Almost half of that energy goes to heating and cooling your home. Lighting and appliances represent about a
quarter of those costs. Each of us can take action today to reduce energy use at home, while still staying
comfortable.
</p>
<br>
<p>Let New Day Homes perform a top-to-bottom Energy Audit of your home to help determine the cause of any
problems you may be experiencing, help you gauge your home's energy efficiency, and recommend clear
steps you can take to reduce your energy bills.</p>
<br>
<p><b>Energy Audit</b></p>
<p>
Find out where you can save on energy costs by having a full energy audit done on your home.
</p>
<br>
<p><b>New home Certified Energy Ratings</b></p>
<p>
Performed for builders and home buyers.
</p>
<br>
<p><b>Ratings for Builder Tax Credit</b></p>
<br>
<p><b>Energy STAR Ratings</b></p>
<br>
<p><b>IECC-2009 Testing</b></p>
<p>
Blower door testing, insulation inspections, and pre-verification to meet the IECC-2009
Energy Code requirements.
</p>
</div>
CSS
/*Energy Description*/
#energyrating-desc {
padding-bottom: 150px;
width: 960px;
height: 670px;
margin-left: auto;
margin-right: auto;
}
I greatly appreciate your help.

Answer 1

i took a look in your css source, you have a html closeing tag in your .css take a look
body {
/*background: url(/nd/images/bgtop.png), url(/nd/images/bg.jpg);
background: url(/nd/images/bgtop.jpg)\9; /* IE 8 and below */
background-repeat: repeat-x\9; /* IE 8 and below */
background-repeat: repeat-x, repeat;*/
color: #000000;
font-size:14px;
font-family: sans-serif;
}
</body>
remove the
</body>
and i dont see energyrating-desc in any of your css
Edit:
Checked with firebug too just in case, you did not specify energyrating-desc in any of your css....

Answer 2

make your div in the centre by assigning proper margin.
margin:0 auto;
#energyrating-desc {
padding-bottom: 150px;
width: 960px;
height: 670px;
margin:0 auto;
}

Answer 3

I reviewed the trace styles panel in the developer tools, there is not style attribute applied to the div element. Also I didn't find any style id named "energyrating-desc" in the css files of the website?! where did you define it? After all, I found that the html response of the "energy.php" has multiple "html" tags and an incorrect structure. You have to do that first before looking for a bug in the css styles.
An html document must have one root tag named "html", one tag inside it named "body", and if you needed, a tag named "head" for including css resources and meta tags or client scripts. Even one incorrect tag (unclosed, bad-written and ...) can cause many unbelievable layout you've never seen.
Cheers