background + float:left + firefox

[Ludwingg]

Hola... tengo el siguiente problema:

Estoy haciendo mi primera maquetacion, y veo que el background del #contenedor no se adecua a la altura de #cuerpo cada que a este ultimo, le pongo float:left;

Ese problema sucede con firefox pero no en IE

pongo el css

Código:

body{
	background:#E1E1E1;
	font:Verdana;
	font-size:12px;
	color:#0066CC;
	margin:20px 0px 20px 0px;
	text-align:center;
}
#contenedor{
	text-align:left;
	width:700px;
	height:100%;	
	background-color:#F5F5F5;
	margin:auto;
	padding:7px 5px 7px 5px;
	border: solid 1px #000000;
}
#cabecera{
	width:690px;
	background-color:#EDF2FA;
	height:100px;
	margin:auto;
	border:#0066CC 1px dotted;
	font:Georgia, "Times New Roman", Times, serif;
	font-size:27px;
	color:#990000;
}
#cuerpo{
	width:480px;
	float:left;
	background-color:#FFFFFF;
	border:#0066CC 1px dotted;
	margin:0px auto 3px 4px;
}
#titulo{
	margin:35px 3px 10px 7px;
}
#menu{
	width:680px;
	background-color:#FFFFFF;
	padding:5px 5px 5px 5px;
	margin:3px auto;
	border:dotted 1px #0066CC;
}
A.vinculo, A.vinculo:ACTIVE, A.vinculo:LINK, A.vinculo:VISITED{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#0066CC;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
}
A.vinculo:HOVER{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:line-through;
	color:#990000;
}
#texto{
	margin-left:3px;
	margin-top:3px;
	margin-right:3px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
}
#tema{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:20px;
	color:#990000;
}
#cajas{
	width:200px;
	background-color:#ffffff;
	border:#0066CC 1px dotted;
	float:right;
	margin:0px 4px 3px auto;
	margin:0px 4px 3px 1px !important;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size=12px;
	/*margin:0px 4px 0px 0px;*/
}
#cajasin{
	font: 12px bold Georgia #990000;
	margin:2px 2px 2px 2px;
}
#cajas2{
	width:200px;
	height:auto;
	background-color:#EDF2FA;
	border:#0066CC 1px dotted;
	float:right;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size=12px;
	color:#990000;
	margin:-1px 4px 2px 0px;
	/*margin:-1px 4px 2px 1px;*/
	/*text-align:justify;
}

aqui el html

Código:

<div id="contenedor">
	<div id="cabecera">
		<div id="titulo">Este es el emcabezado</div>
	</div>
	<div id="menu">
	<a href="-" class="vinculo">Inicio</a> - <a href="-" class="vinculo">Noticias</a> - <a href="-" class="vinculo">Eventos</a> - <a href="-" class="vinculo">Nosotros</a> - <a href="-" class="vinculo">Contacto</a>
	</div>
	<div id="cuerpo" >
		<div id="texto">
		<p id="tema">Amorphis</p>
  		  <p>Last day brings the grace, For bearers of forbidden name, Step into five fold mace, As son as father in a frame</p>
	  		<p><em>[Chorus:]</em><br />
	  		  Someday fire wipes the rain, Fears are frozen tears, whisper Things that no one heras, Cry now, cry now for me again, Tomorrows pride 					              and pain, Why you kneel before my name</p>
	  		<p>Crushing my belief, And make shape to my relief, For who you set your prayers, I can't hear them anyway</a>.</p>
	  		<p><em>[Chorus:]</em><br />
            Someday fire wipes the rain, Fears are frozen tears, whisper Things that no one heras, Cry now, cry now for me again, Tomorrows pride and            pain, Why you kneel before my name</p>
	  		<p><em>[Chorus:]</em><br />
            Someday fire wipes the rain, Fears are frozen tears, whisper Things that no one heras, Cry now, cry now for me again, Tomorrows pride and            pain, Why you kneel before my name</p>
		</div>
	</div>
	<div id="cajas">
		<div id="cajasin">caja</div>
	</div>
	<div id="cajas2">
		<div id="cajasin">
		  <p>Aqui toda la informacion sobre la caja uno, Aqui toda la informacion sobre la caja uno.</p>
		  <p>&nbsp;</p>
		</div>
	</div>
	<div id="cajas">
		<div id="cajasin">categorias</div>
	</div>
	<div id="cajas2">
		<div id="cajasin">
		  <p><a href="-" class="vinculo">Categoria 1</a></p>
		  <p><a href="-" class="vinculo">Categoria 2</a></p>
		  <p><a href="-" class="vinculo">Categoria 3</a></p>
		  <p><a href="-" class="vinculo">Categoria 4</a></p>
		  <p><a href="-" class="vinculo">Categoria 5</a></p>
		  <p><a href="-" class="vinculo">Categoria 6</a></p>
		  <p><a href="-" class="vinculo">Categoria 7</a></p>
		  <p><a href="-" class="vinculo">Categoria 8</a></p>
	    </div>
	</div>
</div>

Pruebenlo en firefox, y veran como un fondo griz claro, no crece junto con el contenido, pero en IE si funciona.

Gracias