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….