Los float me eliminan el fondo de un div

[NaSHoOo]

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

[kseso?]

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

[reversible]

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

[Mikmoro]

Iniciado por NaSHoOo

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

[NaSHoOo]

muchas gracias a todos, voy a probar :)

[NaSHoOo]

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

[NaSHoOo]

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...

[Mikmoro]

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.

[NaSHoOo]

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 )

[posavasos]

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; }

[Mikmoro]

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.

[NaSHoOo]

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 :)

[Mikmoro]

¿No usarás en el curro algún portable de esos, que dan muchos problemas?