Foros del Web » Creando para Internet » CSS »

background + float:left + firefox

Estas en el tema de background + float:left + firefox en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/05/2007, 18:56
Avatar de Ludwingg  
Fecha de Ingreso: diciembre-2002
Ubicación: San Salvador
Mensajes: 951
Antigüedad: 15 años
Puntos: 5
background + float:left + firefox

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
  #2 (permalink)  
Antiguo 18/10/2007, 11:51
 
Fecha de Ingreso: julio-2007
Mensajes: 3
Antigüedad: 10 años, 4 meses
Puntos: 0
Re: background + float:left + firefox

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é.
  #3 (permalink)  
Antiguo 18/10/2007, 20:11
naf
 
Fecha de Ingreso: agosto-2007
Ubicación: Chile
Mensajes: 23
Antigüedad: 10 años, 3 meses
Puntos: 0
Re: background + float:left + firefox

Prueba colocando altura minima al #contenedor, por que el 100% no te lo esta tomando encuenta.
  #4 (permalink)  
Antiguo 18/10/2007, 20:29
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Re: background + float:left + firefox

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

Cita:
.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
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -

Última edición por webosiris; 18/10/2007 a las 20:41 Razón: agrego explicación
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:43.