no me respeta la altura de un div

[talmente]

Hola, prueba esto, me he tomado la livertad de hacer algunos combios (minimos) para que te funcione, los colores de fondo solo son para identificar cada cosa.

Código:

body {
	font-size: 12px;
	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	padding:0px;
	margin:0px 2%;
}
#container {
	width: 100%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto; 
}
#container #capcalera {
 font-family: "Times New Roman", Times, serif;
 height:100px;
 border:1px solid #006600;
 margin-bottom:5px;
 
}
#container #cos{
	font-family: "Times New Roman", Times, serif;
	border:1px solid #006600;
	background: #3366FF;
	float: left;
	display: block;
	width: 100%;
}
#container #peu {
	font-family: "Times New Roman", Times, serif;
	height:45px;
	border:1px solid #006600;
	margin-top:5px;
	background-color: #CEFFCE;
	clear: both;
}
#container #cos #menu {
	font-family: "Times New Roman", Times, serif;
	float: left;
	width: 20%;
	border: 1px solid #CCCCCC;
	background: #993300;
}
#container #cos #contingut {
	font-family: "Times New Roman", Times, serif;
	float: right;
	width: 79%;
	margin-top: 2px;
	margin-right: 2px;
	margin-bottom: 2px;
	margin-left: 2px;
	border: 1px solid #CCCCCC;
	overflow: auto;
	background: #00CC99;
}

Código:

<div id="container" align="center">
<div id="capcalera">hola caracola
</div>
<div id="cos">
<div id="menu" class="menu">
  <p>menu menu menu</p>
  <p>menu menu</p>
  <p>menu menu</p>
  <p>menu menu</p>
  <p>menu menu</p>
  <p>menu menu</p>
  <p>&nbsp;</p>
  <p>menu menu</p>
  <p>menu menu</p>
  <p>menu menu</p>
  <p>menu menu</p>
  <p>menu menu</p>
  <p>menu menu</p>
  <p>menu menumenu menu</p>
  <p>menu menu</p>
  <p>menu menu</p>
  <p>menu menu</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div id="contingut" class="contingut">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>adsfasdfads</p>
</div>
</div>
<div id="peu">
</div>
</div>