Help Me Remove Spacing in #middle

[LavernGingerich]

Hello,

I need some help to remove extra space at the bottom of my middle div in Netscape 8.0.

Can you help?

Here is my CSS:

/* CSS Document */
body {
  font-family: Verdana, Tahoma, Helvetica;
  font-size: 62.5%;
  line-height: 160%;
  cursor: default;
  margin: 0;
  padding: 0;
  text-align: center;
  background: url(images/bg.gif);
}
img{border:0}
p {
  margin: 0 0 10px 0;
  font-size: 12px;
  line-height: 175%;
  clear: left;
  text-align: left;
}
p.signature {
  font-style: italic;
  margin-left: 270px;
}
p.photo {
  text-align: center;
  margin: 30px 0;
}
p.photo2 {
  text-align: center;
  margin-top: 30px;
}
p.photo img {border:1px solid #000000;}
p.photo2 img {border:0;}
a:link, a:active {
  text-decoration: underline;
  color: #CC0053;
}
a:visited {color: #CC3366;}
a:hover {text-decoration: none;}
ul.sitemap {
  padding: 20px 0 0 40px;
}
ul.indented1 {
  padding-left: 20px;
}
ul.indented2 {
  padding-left: 30px;
}
li.nested {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
h1 {
  font-size: 19px;
  line-height: 150%;
  color: #000;
  text-align: center;
  font-weight: normal;
  margin: 0;
}
h1.red {
  color: #CC0033;
  margin: 10px 0 20px 0;
}
h2 {
  font-size: 1.7em;
  margin: 0;
  font-weight: normal;
  text-align: left;
}
#heading {
  width: 816px;
  height: 82px;
  margin: 0 auto;
  background: url(images/heading.gif);
  position: relative;
}
#description {
  width: 487px;
  text-align: center;
  position: absolute;
  top: 46px;
  left: 0;
  font-size: 1.1em;
  font-style: italic;
}
#contact {
  position: absolute;
  top: 22px;
  right: 55px;
  text-align: right;
  font-size: 1.1em;
}
#contact span.phone {
  font-weight: bold;
}
#navbar {
  height: 32px;
  width: 816px;
  margin: 0 auto;
  padding-top: 13px;
  background: url(images/navbar_top.gif) no-repeat;
  position: relative;
  text-align: center;
  font-size: 1.1em;
}
* html #navbar {height:48px;he\ight:32px}
.navbar-links a:link, .navbar-links a:visited, .navbar-links a:active {
  text-decoration: none;
  color: #000;
  margin: 0 5px;
  font-weight: bold;
}
.navbar-links a:hover {
  text-decoration: underline;
} 
#middle {
  width: 756px;
  margin: 0 auto;  
  padding: 26px 30px 0 30px;
  background: url(images/middle_bg.gif) repeat-y;
  overflow: hidden;
  text-align: left;
}
* html #middle {width:816px;w\idth:756px;}
#left {
  width: 232px;
  text-align: center;
	position: relative;
	float: left;
	background: url(images/sidebar_bg.gif) repeat-y;
}
#left-top {
  background: url(images/sidebar_top.gif) no-repeat top;
  width: 232px;
  height: 13px;
}
#left-bottom {
  background: url(images/sidebar_bottom.gif) no-repeat bottom;
  width: 232px;
  height: 13px;
}
#left ul {
  margin: 10px 15px 0 25px;
  padding: 0;
  text-align: left;
  list-style-type: none;
}
#left li {
  margin: 0;
  background: url(images/bullet.gif) no-repeat left center;
  padding: 0;
  
}
#left ul a:link, #left ul a:visited, #left ul a:active {
  font-size: 11px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 20px;
  text-decoration: none;
  font-weight: bold; 
  color: #000000;
  display: block;
}
#left ul a:hover {
  font-size: 11px;
  font-weight: bold; 
  color: #990033;
}
#left p.comment {
  margin: 0 20px;
  font-size: 1.1em;
  font-style: italic;
}
#left p.author {
  margin: 0 20px 20px 20px;
  font-size: 1em;
  text-align: right;
  line-height: 150%;
}
#right {
  position: relative;
  float: right;
  width: 488px;
}
#main {
  clear: both;
  text-align: center;
  padding: 20px 0;
  position: relative;
}
.box1 {
  width: 163px;
  height: 246px;
  position: absolute;
  top: 61px;
  right: 37px;
}
.box1 p {
  margin: 0 0 10px;
  font-size: 1.2em;
}
.box1 p.details {
  font-size: 1.1em;
  text-align: right;
}
#footer {
  width: 816px;
  height: 34px;
  margin: 0 auto;
  padding-top: 18px;
  background: url(images/navbar_bottom.gif) no-repeat;
  position: relative;
  text-align: center;
  font-size: 1.1em;
}
* html #footer {height:52px;he\ight:34px}
#subfooter {
  font-size: 1em;
  margin: 0 auto;
  padding: 10px 0;
  color: #6A6A6A;
  width: 816px;
  text-align: center;
  background: url(images/middle_bg.gif) repeat-y;
}
#subfooter a:link, #subfooter a:visited, #subfooter a:active {
  font-size: 1em;
  color: #6A6A6A;
  text-decoration: underline;
}
#subfooter a:hover {
  text-decoration: none;
}
#lightbox {
	background-color: #eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
}
#lightboxDetails {
	font-size: 1.1em;
	font-weight: bold;
	padding-top: 0.8em;
}	
#lightboxCaption {
  float: left;
}
#keyboardMsg {
  float: right;
}
#closeButton {
  top: 5px;
  right: 5px;
  font-size: 1em;
}
#lightbox img {
  border: none;
  clear: both;
} 
#overlay img {
  border: none;
}
#overlay { background-image: url(/images/overlay.png); }
* html #overlay {
	background-color: #333;
	back\ground-color: transparent;
	background-image: url(/images/blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/overlay.png", sizingMethod="scale");
}

Here is my page:

<!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>
<title>The Area's Leading Supplier of Outdoor Furniture, Structures, and Accents | Wayside Lawn Structures</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="outdoor patio lawn furniture childrens playsets storage sheds buildings gazebos playground equipment ornaments accents" />
<meta name="description" content="The leading supplier of outdoor structures and accents in the tri-state area of Ohio, Pennsylvania, and West Virginia" />

<link rel="stylesheet" type="text/css" href="wayside.css" />
<script type="text/javascript" src="javascript/lightbox.js"></script>

</head>

<body>

<?php include('top.php'); ?>

<div id="middle">
  <div id="left">
    <div id="left-top"></div>
    <p class="comment">"This is what one happy person said about a gazebo they bought from Wayside Lawn Structures."</p>
    <p class="author">Name<br />City, St.</p>
    
    <p class="comment">"This is what one happy person said about a gazebo they bought from Wayside Lawn Structures."</p>
    <p class="author">Name<br />City, St.</p>
    <a href="images/wayside-lawn-structures.jpg" rel="lightbox" title="Ariel View of Wayside Lawn Structures"><img src="images/lot_ariel.jpg" width="208" height="64" alt="Ariel View of Wayside Lawn Structures Lot" title="Ariel View of Wayside Lawn Structures Lot" /></a>
    <ul>
      <li><a href="/quote-request.php">Free Price Quote</a></li>
      <li><a href="/contact.php">Directions to Our Lot</a></li>
      <li><a href="images/wayside-lawn-structures.jpg" rel="lightbox" title="Ariel View of Wayside Lawn Structures">Ariel View of Our Lot</a></li>
      <li><a href="/contact.php">Contact Us</a></li>
    </ul>
    <div id="left-bottom"></div>
  </div>  
  <div id="right">
    <h1>Discover the area's biggest supplier of outdoor furniture, structures, and accents</h1>
    <h1 class="red">Where you are treated as a friend, and relationships are more important than money.</h1>
    <p>Through the years, neighbors, friends, and many folks around the community have come to depend on us for <b>superior quality products</b>, such as outdoor furniture, children’s playground equipment, gazebos, and storage sheds.</p>
    <p>We have been servicing the tri-state area of Ohio, Pennsylvania, and West Virginia since the spring of 2002. God has blessed our business, and we’ve grown from a small corner lot into the area's leading supplier of outdoor structures and accents.</p>
    <p><b>Customers come first in our business</b>. We are dedicated to developing and maintaining relationships with neighbors and mail-in customers alike, meeting their needs and desires the best we can.</p>
    <p>Use the links above to browse our products, and see which of our unique items catch your attention! Or come by <a href="contact.php">our lot in Columbiana, Ohio</a>. You will find high-quality playground equipment, lawn furniture and ornaments, gazebos, storage buildings, and much more.</p>
    <p>Don't hesitate to <a href="contact.php">contact us</a> with any questions or comments. <b>We are here to serve you!</b></p>
    <p class="signature">Jason Martin, Manager<br />Wayside Lawn Structures</p>
  </div>
  <div id="main">
    <img src="images/picnic_table_chairs.jpg" alt="Picnic Table With Chairs" title="Picnic Table With Chairs" width="750" height="326" />
    <div class="box1">
      <h2>Oval Picnic Table</h2>
      <p>With Set of 5 Chairs</p>
      <p>The only thing missing from this table is you!</p>
      <p>It's ready for your family and friends to gather around and have a great time of relaxation and fellowship.</p>
      <p class="details"><a href="outdoor-furniture/picnic-tables.php">More details</a></p>
    </div>
  </div>
</div>

<?php include('bottom.php'); ?>

[Tyssen]

Can you help?

Maybe if you provide a link to the page or at the very least the code as it's output to the browser with all PHP parsed as HTML.

[LavernGingerich]

Sure, here it is.

<!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>
<title>The Area's Biggest Supplier of Outdoor Furniture, Structures, and Accents</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="outdoor patio lawn furniture childrens playsets storage sheds buildings gazebos playground equipment ornaments accents" />
<meta name="description" content="The leading supplier of outdoor structures and accents in the tri-state area of Ohio, Pennsylvania, and West Virginia" />

<link rel="stylesheet" type="text/css" href="wayside.css" />
<script type="text/javascript" src="javascript/lightbox.js"></script>

</head>

<body>

<div id="heading">
  <div id="description">The leading supplier of outdoor structures and accents in the<br /> tri-state area of Ohio, Pennsylvania, and West Virginia.</div>
  <div id="contact">44781 St. Rt. 14 &bull; Columbiana, OH 44408<br />Hours: 8 am – 5 pm &bull; Monday – Saturday<br /><span class="phone">Toll-Free Phone: 800-846-4940</span></div>

</div>
<div id="navbar" class="navbar-links">
  <a href="/index.php" title="Wayside Lawn Structures Home">Home</a>
  <a href="/about.php" title="About Us">About Us</a>
  <a href="/contact.php" title="Contact Us">Contact Us</a>
  <a href="/storage-building/index.php" title="Storage Buildings">Storage Buildings</a>
  <a href="/playsets/index.php" title="Outdoor Children's Playsets">Playsets</a>

  <a href="/gazebos/index.php" title="Gazebos">Gazebos</a>
  <a href="/lighthouses/index.php" title="Lighthouses">Lighthouses</a>
  <a href="/outdoor-furniture/index.php" title="Outdoor Furniture">Outdoor Furniture</a>
</div>

<div id="middle">
  <div id="left">
    <div id="left-top"></div>
    <p class="comment">"This is what one happy person said about a gazebo they bought from Wayside Lawn Structures."</p>

    <p class="author">Name<br />City, St.</p>
    
    <p class="comment">"This is what one happy person said about a gazebo they bought from Wayside Lawn Structures."</p>
    <p class="author">Name<br />City, St.</p>
    <a href="images/wayside-lawn-structures.jpg" rel="lightbox" title="Ariel View of Wayside Lawn Structures"><img src="images/lot_ariel.jpg" width="208" height="64" alt="Ariel View of Wayside Lawn Structures Lot" title="Ariel View of Wayside Lawn Structures Lot" /></a>
    <ul>
      <li><a href="/quote-request.php">Free Price Quote</a></li>

      <li><a href="/contact.php">Directions to Our Lot</a></li>
      <li><a href="images/wayside-lawn-structures.jpg" rel="lightbox" title="Ariel View of Wayside Lawn Structures">Ariel View of Our Lot</a></li>
      <li><a href="/contact.php">Contact Us</a></li>
    </ul>
    <div id="left-bottom"></div>
  </div>  
  <div id="right">
    <h1>Discover the area's biggest supplier of outdoor furniture, structures, and accents</h1>

    <h1 class="red">Where you are treated as a friend, and relationships are more important than money.</h1>
    <p>Through the years, neighbors, friends, and many folks around the community have come to depend on us for <b>superior quality products</b>, such as outdoor furniture, children’s playground equipment, gazebos, and storage sheds.</p>
    <p>We have been servicing the tri-state area of Ohio, Pennsylvania, and West Virginia since the spring of 2002. God has blessed our business, and we’ve grown from a small corner lot into the area's leading supplier of outdoor structures and accents.</p>
    <p><b>Customers come first in our business</b>. We are dedicated to developing and maintaining relationships with neighbors and mail-in customers alike, meeting their needs and desires the best we can.</p>
    <p>Use the links above to browse our products, and see which of our unique items catch your attention! Or come by <a href="contact.php">our lot in Columbiana, Ohio</a>. You will find high-quality playground equipment, lawn furniture and ornaments, gazebos, storage buildings, and much more.</p>

    <p>Don't hesitate to <a href="contact.php">contact us</a> with any questions or comments. <b>We are here to serve you!</b></p>
    <p class="signature">Jason Martin, Manager<br />Wayside Lawn Structures</p>
  </div>
  <div id="main">
    <img src="images/picnic_table_chairs.jpg" alt="Picnic Table With Chairs" title="Picnic Table With Chairs" width="750" height="326" />

    <div class="box1">
      <h2>Oval Picnic Table</h2>
      <p>With Set of 5 Chairs</p>
      <p>The only thing missing from this table is you!</p>
      <p>It's ready for your family and friends to gather around and have a great time of relaxation and fellowship.</p>
      <p class="details"><a href="outdoor-furniture/picnic-tables.php">More details</a></p>

    </div>
  </div>
</div>

<div id="footer" class="navbar-links">
  <a href="/index.php" title="Wayside Lawn Structures Home">Home</a>
  <a href="/about.php" title="About Us">About Us</a>
  <a href="/contact.php" title="Contact Us">Contact Us</a>
  <a href="/storage-building/index.php" title="Storage Buildings">Storage Buildings</a>

  <a href="/playsets/index.php" title="Outdoor Children's Playsets">Playsets</a>
  <a href="/gazebos/index.php" title="Gazebos">Gazebos</a>
  <a href="/lighthouses/index.php" title="Lighthouses">Lighthouses</a>
  <a href="/outdoor-furniture/index.php" title="Outdoor Furniture">Outdoor Furniture</a>
</div>
<div id="subfooter">Copyright &copy;2007 Wayside Lawn Structures. Design by <a class="credits" href="http://www.newcdesigns.com" title="Web Site and Graphic Design Services">New Creation Designs</a>.</div>

</body>
</html>

[LavernGingerich]

Actually, it has decided to stop showing that space, so I guess we won't worry about it.

For some reason, though, it is pushing #right away from the right side and it turn it forces #right below #left instead of showing them side-by-side. It looks good in all my other browsers, even in Netscape Navigator 9, but in 8, it's messing up.

It appears to be the hack I am using on #middle. Do you have any thoughts?

Here is my CSS for #middle, #left, and #right.

#middle {
  width: 756px;
  margin: 0 auto;  
  padding: 26px 30px 0 30px;
  background: url(images/middle_bg.gif) repeat-y;
  overflow: hidden;
  text-align: left;
}
* html #middle {width:816px;w\idth:756px;}
#left {
  width: 232px;
  text-align: center;
	position: relative;
	float: left;
	background: url(images/sidebar_bg.gif) repeat-y;
}
#left-top {
  background: url(images/sidebar_top.gif) no-repeat top;
  width: 232px;
  height: 13px;
}
#left-bottom {
  background: url(images/sidebar_bottom.gif) no-repeat bottom;
  width: 232px;
  height: 13px;
  clear: both;
}
#left ul {
  margin: 10px 15px 0 25px;
  padding: 0;
  text-align: left;
  list-style-type: none;
}
#left ul li {
  margin: 0;
  background: url(images/bullet.gif) no-repeat left center;
  padding: 0;
  float: left;
  clear: left;
  width: 180px;
  
}
#left ul a:link, #left ul a:visited, #left ul a:active {
  font-size: 11px;
  padding: 6px 0 6px 20px;
  text-decoration: none;
  font-weight: bold; 
  color: #000;
  display: inline-block;
}
#left ul a:link, #left ul a:visited, #left ul a:active {
  display: block;
}
#left ul a:hover {
  font-size: 11px;
  font-weight: bold; 
  color: #990033;
}
#left p.comment {
  margin: 0 20px;
  font-size: 1.1em;
  font-style: italic;
}
#left p.author {
  margin: 0 20px 20px 20px;
  font-size: 1em;
  text-align: right;
  line-height: 150%;
}
#right {
  position: relative;
  float: right;
  width: 494px;
}