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

[mikidelux]

Estoy igual que tu solo que me pasa tanto con right como con left. El problema es que la capa contenedora de la caja que flotas se reduce solo a los pixeles que les haya dado como border y queda por encima de las cajas.

Me explico fatal, lo sé.

[naf]

Prueba colocando altura minima al #contenedor, por que el 100% no te lo esta tomando encuenta.

[webosiris]

usa un cleaner... SIEMPRE acuerdense de "limpiar" despues de usar float.

.cleaner{clear:both}

<div id="contenedor">
<div id="contenido"> blablabla </div>
blablabla
<br class="cleaner" />
</div>

la explicación es que al usar float, estas sacando al elemento flotado del normal orden y por lo tanto el contenedor hace de cuenta que no está dentro del contenedor, y height si no esta fijada depende del contenido del elemento.
Con un cleaner lo que se consigue es forzar para que tanto a la derecha como a la izquierda de ese elemento no haya nada flotando, y por lo tanto el contenedor es forzado a bajar para contener al cleaner y por lo tanto contener también al elemento flotado.


Por cierto, el height cuando lo fijas en porcentaje significa que es un % de la altura del padre.
Para que te funcione al 100% tenes que asignarle 100% tambien al elemento html, que es el elemento padre para todos los demás.

Espero con esta explicación no confundir aún más