Container div not stretching to the height of the longest inner div

programming web dev
1

I’m trying very hard to use CSS instead of tables in my site designs now, and its dreadfully annoying, though I’m hoping it will pay off later. At the moment however, I need some help. I’m creating a site for a client, and i have all of the divs inside of a container div that’s centered and keeps everthing the correct width. However, it ends before the longest inside div ends, causing the footer to show up where it’s not supposed to be. Any suggestions on how to fix this would be most appreciated.

CSS code:


body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color:#C43535;
	margin:auto auto;
	text-align: center;
}
ul {
  	padding: 0;
  	margin: 0;
  	list-style: none;
}
li {
	float: left;
  	position: relative;
	width: 125px;
  	text-align: left;
  	cursor: pointer;
  	background-color: #EBDB95;
	font-size: 12px;
	font-weight: bold;
	padding: 2px 0 2px 2px;
}
li ul {
	display: none;
	position: absolute; 
  	top: 100%;
  	left: 0;
	font-weight: normal;
	border: 1px solid #000;
}
li li {
	font-size: 10px;
	font-weight: none;
}
li#sitemap {
	float: right;
  	position: relative;
	text-align: right;
	width: 123px;
	cursor: pointer;
  	background-color: #EBDB95;
	font-size: 12px;
	font-weight: bold;
	padding: 2px 2px 2px 0;	
}
li > ul {
	top: auto;
	left: auto;
}
li:hover ul, li.over ul{ display: block; }	 
#container {
	margin: 0 auto;
	width: 760px;
	}
#headertitle {
	position: relative;
	background-color: #000;
	width: 760px;
	height: 26px;
	text-align: right;
}  
#headerimage {
	width: 760px;
}
#navigation {
	width: 760px;
  	background-color: #EBDB95;
}
#content {
	font-family: Georgia, "Times New Roman", Times, serif;
	float:left;
	width:520px;
	background:#fff;
	border-right:2px solid #000;
	border-bottom:2px solid #000;
	margin: 0 10px 0 0;
	padding: 5px 5px 20px 15px;
}
p.news {
	font-size: 10px;
	color: #F5EECD;
}
#nav a {
	color: #000;
	text-decoration: none;
}
#nav a:hover {
	color: #FE7941;
}
#footer {
	font-size: 9px;
	text-align:center;
}

HTML code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>McMurry Business Park - TEST</title>
<script language="javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes*;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
//-->
</script>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div id="container">
		<div id="headertitle"><img src="images/headertitle.gif" width="305" height="25"></div>
		<div id="navigation">
			<ul id="nav">
  				<li><a href="">Information</a>
    				<ul>
      					<li><a href="">Location</a></li>
      					<li><a href="">Market Context</a></li>
      					<li><a href="">PUD Development Plan</a></li>
						<li><a href="">Image Gallery</a></li>
					</ul>
  				</li>
			<li><a href="">Newsroom</a></li>
  				<li><a href="">Vision</a>
				    <ul>
      					 <li><a href="">Regional Medical Center/Campus</a></li>
				     	 <li><a href="">Regional Hotel/Conference Center</a></li>
						 <li><a href="">Indoor Athletic Center/Sports Complex</a></li>
				     	 <li><a href="">Preliminary Concept Site Plan</a></li>
	 					 <li><a href="">Proposed Infrastructure Concepts</a></li>
				     	 <li><a href="">Next Steps</a></li>
				    </ul>
			</li>
		  	<li><a href="">Team</a></li>
		  	<li><a href="">Contact</a></li> 
		  	<li id="sitemap"><a href="">Site Map</a></li>	
		</ul>
	</div>
	<div id="headerimage"><img src="images/fillerpic.jpg" width="760" height="167" hspace="0"><!-- Flash Movie goes here //--></div>
	<div id="content">
  		<div align="left"><img src="images/quickinfo.gif" width="152" height="24"></div>
  		<p align="left">Ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, eu fugiat nulla pariatur. Consectetur adipisicing elit, quis nostrud exercitation cupidatat non proident. Mollit anim id est laborum.</p>
		<p align="left">Sed do eiusmod tempor incididunt excepteur sint occaecat qui officia deserunt. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Quis nostrud exercitation ut enim ad minim veniam, sunt in culpa.</p>
  		<p align="left">Qui officia deserunt in reprehenderit in voluptate. Eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, ullamco laboris nisi.</p>
  		<p align="left">Ut labore et dolore magna aliqua. Velit esse cillum dolore cupidatat non proident, mollit anim id est laborum. Sed do eiusmod tempor incididunt ut enim ad minim veniam, ullamco laboris nisi. Lorem ipsum dolor sit amet, velit esse cillum dolore eu fugiat nulla pariatur. Qui officia deserunt mollit anim id est laborum.</p>
	</div>
    <div align="left"><img src="images/news.gif" width="59" height="24" vspace="0"></div>
    <p align="left" class="news" style="news">Ut labore et dolore magna aliqua. Ut enim ad minim veniam, duis aute irure dolor ullamco laboris nisi. Sed do eiusmod tempor incididunt cupidatat non proident, mollit anim id est laborum. Lorem ipsum dolor sit amet, quis nostrud exercitation duis aute irure dolor.</p>
	<div align="footer">Footer should not go here >_<</div>	
</div>
</body>
</html>

website: http://www.mcmurrybusinesspark.com/launch.php - note the footer lurking over there under the news section. -_- it SHOULD be at the bottom of the page.

Anywho, thanks in advance for any help. 'tis much appreciated. :smiley: