Trouble With Div Height

[owosso]

I created #midContainer to hold #navVer and #content. I want the height of #midContainer to flow with the height of the two inside, depending on the content of each. How can I do this?!00% is not working. Neither is auto. Here is a link to what it looks like now. #midContainer has a border around it and is just above the Farm Mutual logo. IHere is the CSS code: It's more than half way down.

@charset "UTF-8";/* CSS Document */body {	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */	padding: 0;	background:#C9cbbf url(images/bodyGradient.gif) repeat-x;	text-align: center;	font: 62.5%/1.7em Verdana, Geneva, sans-serif;	}html,body {	width: 100%;	height: 100%;	}/* 100% in any resolution */*	{margin: 0; padding: 0; }/* creates no space after return*/	#containerHor {	width: 642px;  /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */	background:url(images/logoswoosh.gif) no-repeat;	background-color:#FFF;	text-align: left; /* this overrides the text-align: center on the body element. */	padding: 10px 20px 0 18px;}p	{	font-size: 1.2em;  	color: #333;		}	a	{	font-size: 1.2em; 	text-decoration:none;}	h1	{	font-size: 1.4em bold;	color:#395172;	text-align:center;	line-height: 1.5em; /*this is 1.5em in addition to the 1.7em in the body*/	}	h2	{	font-size: 1.2em;	color:#395172;	text-align:left;	}	h3	{	font-size: .8em;	line-height: 1.5em;	font-weight: normal;	}		.blue	{	color: #395172;}.center	{	text-align:center;}#header { 	border-left:#000 solid 1px;	border-top:#000 solid 1px;	border-right:#000 solid 1px;	padding: 46px 0; /* This padding works in conjunction with the navHor padding to maintain the header size and align the horizontalmenu */ 		}				/********************** Horizontal Navigation Code starts here***********************************/		#navHor{	width: 325px;	float:right;	padding-top:18px;  /* This padding works in conjunction with the header padding to maintain the header size and align the horizontalmenu */ 	}	#navHor-1 {	padding:0;	margin:0;	list-style:none;	width:100%;	height:29px;	}#navHor-1 li {	margin:0;	padding:0;	display:block;	float:left;	position:relative;	width:105px;}#navHor-1 li a:link, #navHor-1 li a:visited {	padding:4px 0;	display:block;	text-align:center;	text-decoration:none;	color:#333;	width:105px;	height:13px;}#navHor-1 li:hover a, #navHor-1 li a:hover, #navHor-1 li a:active {	padding:4px 0;	display:block;	text-align:center;	text-decoration:none;	color:#BBD331;	width:105px;	height:13px;	}	#navHor-1 li ul.navHor-2 {	margin:0;	padding: 0 1px 0 1px;	list-style:none;	display:none;	width:175px;	position:absolute;	top:21px; /* this determines how tight the drop down squares are to the nav-1 menu items*/	left:-1px;	border:1px solid #fff;	background:transparent #D1DEF0;}#navHor-1 li:hover ul.navHor-2 {	display:block;}#navHor-1 li ul.navHor-2 li {	width:130px;	clear:left;	}#navHor-1 li ul.navHor-2 li a:link, #navHor-1 li ul.navHor-2 li a:visited {	clear:left;	background:#D1DEF0;	color:#333;	padding:10px 0 2px 5px;	width:170px;	border:none;	border-bottom:1px solid #ffffff;	position:relative;	z-index:1000;	text-align:left;}#navHor-1 li ul.navHor-2 li:hover a, #navHor-1 li ul.navHor-2 li a:active, #navHor-1 li ul.navHor-2 li a:hover {	clear:left;	background:url(images/roll.gif) ;	color:#fff;	padding:10px 0 2px 5px;	width:170px;	border:none;	border-bottom:1px solid #ffffff;	position:relative;	z-index:1000;}#navHor-1 li ul.navHor-2 li ul.navHor-3 {	display:none;	margin:0;	padding:0;	list-style:none;	position:absolute;	left:145px;	top:-2px;	padding:5px 1px 0 1px;	border:1px solid #333;	border-left:1px solid #333;	background:#ffffff;	z-index:900;}#navHor-1 li ul.navHor-2 li:hover ul.navHor-3 {	display:block;}#navHor-1 li ul.navHor-2 li ul.navHor-3 li a:link, #navHor-1 li ul.navHor-2 li ul.navHor-3 li a:visited {	background:#333;}#navHor-1 li ul.navHor-2 li ul.navHor-3 li:hover a, #navHor-1 li ul.navHor-2 li ul.navHor-3 li a:hover, #navHor-1 li ul.navHor-2 li ul.navHor-3 li a:active {	background:#D1DEF0;}#navHor-1 li ul.navHor-2 li a span {	position:absolute;	top:0;	left:132px;	font-size:12em;	color:#BBD331;}#navHor-1 li ul.navHor-2 li:hover a span, #navHor-1 li ul.navHor-2 li a:hover span {	position:absolute;	top:0;	left:132px;	font-size:12em;	color:#ffffff;}		/******************** Horizontal Navigation Code ends here*************************/		#image {	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */	background: #FFFFFF;	border:#000 solid 1px;	}#midContainer {	padding: 20px 0 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */	background: #FFFFFF;	border-left:#000 solid 1px;	border-bottom:#000 solid 1px;	border-right:#000 solid 1px;	height: 100%;	}/******************* Vertical Navigation Code starts here*****************************/#navVer	{	width: 210px;	padding: 10px 0;	float:left;	background: url(images/navscreen.gif) no-repeat  ;	height: 315px;	}	#navVer-1 {	list-style: none;	width: 205px;	padding: 12px 1px 0 2px;	height: 150px;}#navVer-1 ul{	list-style: none;	margin: 0px;	padding: 0px;}#navVer-1 a:link{	color: #333;	text-align:right;	height: 24px;	display:block;	text-decoration: none;	padding: 5px 25px  0;	}#navVer-1 a:hover{	color: #FFF;	background:url(images/roll.gif) ;	border-bottom:1px solid #fff;		}#navVer-1 a:active{	color: #999;}			/************************ Vertical Navigation Code ends here******************************/#content	{	width: 375px;	padding: 3px 10px 20px 0;	float:right;	}#footer { 	padding: 0 10px;	/* this padding matches the left alignment of the elements in the divs that appear above it. */	clear: both;	} 	#footer p {	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */	font-size: 1.0em;	text-align:center;}#footer a {	color: #333;	font-size: 1.0em;}

Here is that portion of the hmtl

<div id="midContainer">        <div id="navVer">        <ul id="navVer-1">		<li><a href="#" target="_self">Products</a></li>		<li><a href="#" target="_self">Claims</a></li>		<li><a href="#" target="_self">Agents Page</a></li>		<li><a href="#" target="_self">Search</a></li>	</ul>                                 </div> <!-- end #navVert -->       <div class="center" id="content">                            <img src="images/FMLogo.png" width="181" height="50" alt="Farm Mutual logo" />               <h1> </h1>                       <!-- A.M. Best BestMark Start--><!-- This code is property of the A.M. Best Company and may not be altered in any way nor copied onto any unauthorized domain. Questions about this code or about the BestMark icon should be directed to bestmarkinsurers@ambest.com --><a href=http://www3.ambest.com/ratings/profile.asp?ambnum=10526&RatingCode=174510526><img src="images/bestsicon.gif" alt="This company was issued a secure rating by the A.M. Best Company, click for additional details" width="187" height="70" border=0></a><!-- Copyright 2010 by A.M. Best Company, Oldwick, New Jersey --><!-- A.M. Best BestMark End-->       <p> </p> <h1 class="center">Serving home and farm owners throughout southeastern Wisconsin.</h1> <p>  </p> </div>  <!-- end #content --></div> <!-- end #midContainer -->    

[jeffman]

That is what happens when elements are floated in a container. To correct it, add this to #midContainer:overflow:hidden;