Foros del Web » Creando para Internet » CSS »

Los float me eliminan el fondo de un div

Estas en el tema de Los float me eliminan el fondo de un div en el foro de CSS en Foros del Web. Hola buenos dias, os escribo por si alguien pudiera echarme una mano con un problema que tengo. Estoy iniciandome con la creacion de plantillas de ...
  #1 (permalink)  
Antiguo 21/09/2008, 05:31
 
Fecha de Ingreso: septiembre-2008
Mensajes: 19
Antigüedad: 9 años, 2 meses
Puntos: 0
Los float me eliminan el fondo de un div

Hola buenos dias,

os escribo por si alguien pudiera echarme una mano con un problema que tengo. Estoy iniciandome con la creacion de plantillas de wordpress, y poco a poco me van saliendo.

Pero tengo un problema con una plantilla a 3 columnas. Lo que tengo es lo siguiente:

Código:
<div id=wrapper>

encima un div llamado header

una barra izquierda

un div para contenido

una barra derecha

un footer

</div>

y en el archivo css tengo definido un fondo para la div llamada wrapper haciendo el truco de faux columns, o sea, simulando unas columnas hacia abajo.

Va todo bien y el fondo se muestra correctamente mientras los divs de barras laterales y el div del contenido no tengan definido un float para posicionarlas, pero en el momento que les pongo un float el fondo del wrapper desaparece.


Me podriais ayudar o decir a que es debido? si hace falta os puedo pegar el codigo, muchas gracias a todos
  #2 (permalink)  
Antiguo 21/09/2008, 06:46
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Los float me eliminan el fondo de un div

Hola Nashooo
Sin ver código es dificil, pero creo que lo que quieres hacer es un tema recurrente en FdW.
Mikmoro tiene en varios temas un enlace a cómo conseguir que los tres div´s 'crezcan' dinámicamente hasta el pie en función del contenido de uno de ellos.
Me vas a disculpar, domingo por la mañana, pero sólo he encontrado esta referencia, espero te sirva.
Busca un poco, pues creo que la última vez que puso el enlace fue este mes de septiembre.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 21/09/2008, 15:40
 
Fecha de Ingreso: julio-2008
Mensajes: 35
Antigüedad: 9 años, 5 meses
Puntos: 1
Respuesta: Los float me eliminan el fondo de un div

suele pasar que el elemeto contenedor no aparece o se contrae, parece ser que aqui es cuando entra el hack -clearfix-

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}


define al div wraper debes ponerle el microdformato class="clearfix", espero que te funcione
  #4 (permalink)  
Antiguo 21/09/2008, 16:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Los float me eliminan el fondo de un div

Cita:
Iniciado por NaSHoOo Ver Mensaje
Va todo bien y el fondo se muestra correctamente mientras los divs de barras laterales y el div del contenido no tengan definido un float para posicionarlas, pero en el momento que les pongo un float el fondo del wrapper desaparece.
No es que el fondo desaparezca, es que cuando flotas las cajas dejan de ocupar espacio físico real en el flujo del documento y por tanto la caja que las contiene no crece, es como si no tuviera nada dentro.

Esto se arregla añadiendo un corte justo antes de cerrar la caja contenedora. Busca donde termina (</div>), y añádele esto que pongo en rojo para que quede así:

<div class="corte"></div>
</div> (este es ya el que cerraba la caja)

Ahora añade a tu css este selector:

.corte {clear: both;}

y tu fondo aparecerá como por arte de magia
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 25/09/2008, 04:37
 
Fecha de Ingreso: septiembre-2008
Mensajes: 19
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Los float me eliminan el fondo de un div

muchas gracias a todos, voy a probar :)

Última edición por NaSHoOo; 25/09/2008 a las 05:49
  #6 (permalink)  
Antiguo 25/09/2008, 05:25
 
Fecha de Ingreso: septiembre-2008
Mensajes: 19
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Los float me eliminan el fondo de un div

Mikmoro, he estado probando tu solucion, pero no me funciona. He estado revisando el codigo por si no hubiera puesto lo mismo que tu me decias, pero esta correcto.

Tengo 3 divs flotando a la izquierda, y antes de cerrar el div que las contiene, meto esa ultima div con la clase corte que comentas, pero dicho div contenedor sigue contrayendose...

Sabes a que podria ser debido?

Muchas gracias
  #7 (permalink)  
Antiguo 25/09/2008, 05:45
 
Fecha de Ingreso: septiembre-2008
Mensajes: 19
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Los float me eliminan el fondo de un div

Para mas ayuda, pongo el codigo:

HTML
Código:
<div id="articulos">

	<div id="avances">
		<ul>
			<li class="avances1">Item #1</li>
			<li>Item #2</li>
			<li>Item #3</li>
		</ul>
	</div>

	<div id="analisis">
		<ul>
			<li class="analisis1">Item #1</li>
			<li>Item #2</li>
			<li>Item #3</li>
		</ul>

	</div>

	<div id="reportajes">
		<ul>
			<li class="reportajes1">Item #1</li>
			<li>Item #2</li>
			<li>Item #3</li>
		</ul>

	</div>

<div class="corte"></div>	
</div>
CSS
Código:
body {
	text-align: center;
	font-family: Verdana, Arial, Sans Serif;
	font-size: 12px;
	color: #c00;
}

.corte {
	clear: both;
}

#articulos {
	margin: 0 auto;
	text-align: left;
	width: 660px;
	border: 1px #000 solid;
	background-color: #D2D2D2;
}

#avances {
	width: 220px;
	float: left;
}

#analisis {
	width: 220px;
	float: left;
}

#reportajes {
	width: 220px;
	float: left;
}

A ver si me puedes comentar que he escrito mal...
  #8 (permalink)  
Antiguo 25/09/2008, 06:35
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Los float me eliminan el fondo de un div

No sé a qué te refieres con que "dicho div sigue contrayéndose".

Con el código que has puesto, lo que se ve es una caja con fondo gris, que tiene dentro tres listas. Decías que el fondo del wrapper desaparecía, pero como ahí no muestras ningún wrapper no sé a qué te refieres ahora.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 25/09/2008, 06:46
 
Fecha de Ingreso: septiembre-2008
Mensajes: 19
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Los float me eliminan el fondo de un div

Perdona Mikmoro, no he detallado bien mis explicaciones

En el HTML que he puesto, hay una capa llamada articulos, que contiene otras 3 denominadas avances, analisis y reportajes.

Esta que ahora se llama "articulos" vendria a ser similar al "wrapper" o "contenedor" donde estan las otras 3 capas.

Mediante CSS delimito el ancho del contenedor (660px), y los anchos de las 3 capas contenidas dentro (220px cada una).

Pero cuando a estas 3 capas les aplico un float para posicionarlas, me vuelve a pasar lo mismo del principio. Se me "achica" la capa contenedora (en este caso se llama "articulos"). Te muestro en la siguiente imagen como se ve (en Firefox):



Como puedes comprobar, la linea negra que se ve encima de las listas, es el borde de la capa contenedora, la cual deberia rodear a las otras 3.

Eso es lo que me pasa

(espero haberme explicado mejor ahora )
  #10 (permalink)  
Antiguo 25/09/2008, 07:23
 
Fecha de Ingreso: enero-2005
Mensajes: 265
Antigüedad: 12 años, 11 meses
Puntos: 1
Respuesta: Los float me eliminan el fondo de un div

A mí me sale bien en Firefox 3. Para conseguir lo mismo que en la captura tengo que quitar el <div class="corte"></div>

Prueba con: #articulos { overflow:hidden; }
  #11 (permalink)  
Antiguo 25/09/2008, 08:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Los float me eliminan el fondo de un div

Efectivamente, y a eso es a lo que estaba ya resulta la duda con la respuesta del corte: como he dicho en mi mensaje anterior, con el código que has puesto se ve el fondo gris de la caja contenedora, tanto en FF como en IE.

No sé dónde estará tu problema o cómo habrás hecho la prueba, pero ese código se ve como se espera que se vea, y como dice el amigo posavasos, si quitas el corte es cuando el fondo desaparece y la caja se contrae.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 25/09/2008, 08:36
 
Fecha de Ingreso: septiembre-2008
Mensajes: 19
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Los float me eliminan el fondo de un div

Hola,

es increible! Cuando os posteaba el problema, lo hacia desde el curro. Alli visualizaba la pagina en Firefox 3. Y aunque no os lo creais no me salia la representacion bien. Me pasaba lo que os comentaba.

He llegado a casa, he copypasteado el codigo en otros archivos nuevos, previsualizo en Firefox 3 (de mi casa) y ahora si se ve correctamente!!

no lo pillo...

Por que la informatica es tan ********


P.D. Muchas gracias por vuestra ayuda :)
  #13 (permalink)  
Antiguo 25/09/2008, 09:11
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Los float me eliminan el fondo de un div

¿No usarás en el curro algún portable de esos, que dan muchos problemas?
__________________
Visita mi nueva web idplus.org
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 08:47.