Height designation affects footer & background

Question

I'm having problems getting the footer #address to align
correctly. I have #horizontalContainer which is positioned above
#address. It contains everything except the #address. It also has a
repeating background image of the gradient and a white background
color.
If I designate the height for #horizontalContainer at 1000
pixels, the #address sits below it correctly in IE but too far
below in everything else. See below.
If I designate the height for #horizontalContainer at 100%,
the #address is in the correct place, however the background image
and color of #horizontalContainer do not show up and the grey
background of the body comes through. See below.
Any thoughts?
1000 pixel height.
100% height.
My CSS is attached.

Answer 1

Thanks djinn for your help. I applied your code to my css
however I'm still getting the grey background.
Here's my CSS: The html follows. I'm open to any coding
advice!
body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
margin: 0px;
padding: 0px;
background-color: #CCCCCC;
font-size: 62.5% /* 16px × 62.5% = 10px */;
html, body { min-height:101%; margin-bottom:1px; }
p { font-size: 1.2em; color: #000000; line-height: 1.6em; }
p span { margin-left: 75px; }
a:link, a:visited { font-size: 1.2em; color: #000000;
text-decoration: underline; }
a:hover, a:active { font-size: 1.2em; color: #ac2a2b;
text-decoration: underline; }
h1 {
color:#AC2a2B;
font-size: 1.8em;
font-weight: bold;
h2 { color:#000000; font-size: 1.6em; font-weight: bold;
line-height: 1.2em; }
h3 { color:#000000; font-size: 1.2em; font-weight: bold;
line-height: 1.2em; }
h4 { color:#000000; font-size: 0.8em; }
img.floatLeft {
float: left;
margin: 10px;
img.floatRight {
float: right;
margin: 10px;
#horizontalContainer {
background-image: url(jwrImages/gradient.png);
background-repeat: repeat-y;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFFFFF;
width: 760px;
z-index: 1;
position: relative;
#header {
width: 760px;
z-index: 2;
top: 2px;
background-image: url(jwrImages/header.gif);
background-repeat: no-repeat;
padding-top: 30px;
#header span {
margin-left: 100px;
#rightContainer {
float: right;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
z-index: 5;
width: 480px;
padding-top: 30px;
padding-right: 20px;
#navHor {
width: 760px;
z-index: 5;
background-color: #999999;
border-bottom-width: 3px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #000000;
border-bottom-color: #000000;
left: 0px;
border-top-width: 1px;
position: relative;
#navHor a:link, a:visited { font-size: 1.2em; color: #000000;
text-decoration: none; }
#navHor a:hover, a:active { font-size: 1.2em; color: #ac2a2b;
text-decoration: none; }
#navLeft {
width: 255px;
float: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 451px;
z-index: 4;
position: relative;
background-image: url(jwrImages/abstractSub.png);
background-repeat: no-repeat;
padding-top: 15px;
background-color: #FFFFFF;
#navLeft a:link, a:visited { font-size: 1.2em; color:
#000000; text-decoration: none; }
#navLeft a:hover, a:active { font-size: 1.2em; color:
#ac2a2b; text-decoration: none; }
ul#navLeft {
width: 80px;
position: absolute;
z-index: 3;
left: 45px;
top: 0px;
background-color: #FFFFFF;
height: 200px;
ul#navLeft li {
text-align: right;
text-decoration: none;
list-style: none;
height: 45px;
ul#navLeft li a {
text-decoration: none;
display: block;
ul#navLeft li {
background-color: DDDDc2;
text-decoration: none;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #6F6659;
#youarehere {
background-color:#FFFFFF;
padding-right: 5px;
#address {
width: 760px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000000;
font-size: 1em;
padding-bottom: 2px;
background-color: #999999;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #000000;
position: relative;
margin-right: auto;
margin-left: auto;
clear: both;
text-align: center;
#address span { margin-left: 25px; }
And here's the 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=ISO-8859-1" />
<title>JWR, Inc., Parts</title>
<link href="jwrSub.css" rel="stylesheet" type="text/css"
/>
</head>
<body>
<div id="horizontalContainer">
<div id="header">
<div align="right"><img src="jwrImages/trucks.jpg"
alt="JWR truck fleet" width="365" height="102" /></div>
</div>
<div id="navHor">
<p align="center"><a
href="jwrIndex.html">Home</a><span><a
href="contacts.html">Contact</a></span><span><a
href="equipment.html">Equipment
Sales</a></span><span><a
href="news.html">News</a></span><span><a
href="employment.html">Employment</a></span></p>
</div>
<div id="navLeft">
<!--Start vertical navigation -->
<ul style="list-style-type: none; margin: 0;">
<li style="margin-right: 55px"><div
id="youarehere"><p align="right"><a
href="about.html">About JWR</a></p>
</div>
</li>
<li style="margin-right: 85px">
<p align="right"><a href="recycling.html">Your
Recycling<br />
Solutions</a></p>
</li>
<li style="margin-right: 95px">
<p align="right"><a href="waste.html">Waste
Solutions</a></p>
</li>
<li style="margin-right: 105px">
<p align="right"><a href="product.html">Product
Specific Solutions</a></p>
</li>
<li style="margin-right: 110px">
<p align="right"><a
href="industry.html">Industry Specific
Solutions</a></p>
</li>
<li style="margin-right: 110px">
<p align="right"><a href="service.html">Service
&amp; <br />
Installation</a></p>
</li>
<li style="margin-right: 110px">
<p align="right"><a href="used.html">Used
Equipment</a></p>
</li>
<li style="margin-right: 110px">
<p align="right"><a
href="parts.html">Parts</a></p>
</li>
</ul>
</div>
<!--Close #navLeft End verticle navigation -->
<div id="rightContainer">
<img src="jwrImages/welding.jpg" alt="JWR Inc., welding"
width="186" height="335" class="floatRight" />
<h1>A long and reliable history</h1>
<p>JWR is located in Johnson Creek, Wisconsin.
JWR&rsquo;s roots go back to 1972 when
&ldquo;Jim&rsquo;s Welding &amp; Repair&rdquo;
started as a small welding and repair shop. At that time repairs
were made for local farmers and small fabrication jobs were
performed. </p>
<p>Throughout the years the business took on many
other facets including sandblasting, painting, truck and hoist
repair, container repair and finally compactor installation and
maintenance for local accounts. Jim&rsquo;s Welding &amp;
Repair evolved into JWR as we know it today. </p>
<h1>Our company today </h1>
<p>JWR has since grown into a company with national
presence servicing over 6000 compactors nationwide and performing
over 500 installations on a yearly basis.
JWR provides equipment and solutions for the waste and
recycling industry. In addition to our corporate facility based out
of Johnson Creek WI, we have a service location in Minneapolis, MN,
an experienced sales staff, a full team of professional service
technicians, installers and office personnel.</p>
<p align="center"><img
src="jwrImages/companyToday.jpg" alt="JWR Inc., today" width="460"
height="209" /></p>
<p align="center"> </p>
</div>
<!--close #horizontalContainer -->
</div>
<div id="address">
<p>322 N. Watertown Street, P.O. Box 356, Johnson
Creek, WI 53038 &#8226; 888-699-2848 &#8226; FAX:
920-699-2847</p>
</div>
</body>
</html>