Ayuda con uso de clearfix

alexisenp · #1 (**permalink**) 15/01/2011, 19:40

Hola amigos de foros del web.
Estoy estudiando CSS, para lo cual me puse a jugar con unos divs, modificandoles sus propiedades y el surgió el problema que les explico a continuación.

Tengo un contenedor principal que tiene dentro 2 cajas, y me surgio el tipico problema que el contenedor principal no crece con los div que contiene, por ahí leí que esto se soluciona usando el clearfix, por lo que lo añadí a mi código. pero aun asi no se soluciona el problema =/, el codigo que estoy usando es el siguiente:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style>

.clearfix:before,
.clearfix:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix:after {
	clear: both;
}

/*
	The following zoom:1 rule is specifically for IE6 + IE7.
	Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
	zoom: 1;
}
.cont{
	border: 2px solid #000;
	left:50px;
	top:50px;
	padding:10px;

}
.cont1{
	border: 2px solid #000;
	background:#090;
	position:relative;
	float:left;
}
.cont2{
	border: 2px solid #000;
	background:#00C;
	position:relative;
	float:left;
	left:10px;
	top:30px;

}
</style>
</head>

<body>
<div class="cont clearfix" >
	<div class="cont1" > dentro 1</div>
	<div class="cont2" > dentro 2</div>
</div>
</body>
</html>

quizas estoy haciendo algo mal, no lo se, espero me puedan ayudar.
Muchisimas gracias de antemano.

jalex16 · #2 (**permalink**) 15/01/2011, 19:47

lo correcto sería:

Código HTML:

Ver original<div class="cont" >
    <div class="cont1" > dentro 1</div>
    <div class="cont2" > dentro 2</div>
    <div class="clearfix" ></div>
</div>

para .clearfix suelo ponerle sólo la propiedad clear: both;
con eso me basta. tal vez deberías olvidarte de IE6

alexisenp · #3 (**permalink**) 15/01/2011, 20:29

Gracias jalex16 por tu rapida respuesta, modifique mi código tal cual tu indicas, pero sigue sin funcionarme bien, la segunda caja sigue viendose fuera de mi contenedor principal =/.
Espero me puedan ayudar.

alexisenp · #4 (**permalink**) 15/01/2011, 20:49

Ha y otra cosa jalex16.
al parecer el clear que tu estas indicando no es el mismo que yo uso.
Tu estas hablando del "clear tradicional" que no es el mismo que el "clearfix".
lee esto:
http://www.mindwiremedia.net/2009/01/19/css-clearfix-keeping-pesky-floats-in-their-place/

en resumidas cuentas el "clearfix", no agrega un div vació como lo hace el "clear tradicional", así que el código tal cual lo tengo esta bien y no tendría que hacer esa modificación que me indicas, si no que el problema es otro.

Si estoy equivocado en algo por favor haganmelo saber.

jalex16 · #5 (**permalink**) 15/01/2011, 22:40

En realidad es lo mismo.

Código CSS:

Ver original.clearfix:after {
  content: '.';
  visibility: hidden;
  clear: both;
}
.foo{
  float: left;
}

Pero tu habías puesto un before y after a la vez, bastaba con el .clearfix:after, esto hace que

Código HTML:

Ver original<div class="clearfix">
  <div class="foo">lorem ipsum dolor</div>
  <div class="foo">lorem ipsum dolor</div>
</div>

se convierta en

Código HTML:

Ver original<div class="clearfix">
  <div class="foo">lorem ipsum dolor</div>
  <div class="foo">lorem ipsum dolor</div>
  <div style="visibililty: hidden; clear: both;">.</div>
</div>

Verifica esto:

Código CSS:

Ver original.cont{
    border: 2px solid #000;
    left:50px;  /* No aplica sin relative*/
    top:50px;  /* No aplica sin relative */
    padding: 10px;
}
.cont1{
    border: 2px solid #000;
    background:#090;
    position:relative;  /* ??? */
    float:left;
}
.cont2{
    border: 2px solid #000;
    background:#00C;
    position:relative; /* Hace que mantenga su espacio en el contenedor */
    float:left; /* flotante a la izquierda */
    left:10px;  /* posición? pero si ya era flotante? */
    top:30px;  /* otra posición, left y top son el problema */
}

alexisenp · #6 (**permalink**) 15/01/2011, 23:33

Realiza unas modificaciones al mi codigo corrigiendo los problemas que me haces notar, pero las cajas internas quedaron una al lado de la otra (y no es lo que yo buscaba).

tu respuesta no es la que esperaba, ya que quiero saber como hacer que el contenedor crezca con las cajas que contiene, pero me hizo darme cuenta que aun debo estudiar mas, ya que no pude darme cuenta de esos tontos problemas que tiene mi código.

respecto al clearfix que uso en mi código, me lo recomendaron en otro foro, es el que usa el framework 960 grid (con la diferencia que le borre unas cuantas lineas de comentarios para ponerla aqui), me dijeron que con el no tendria problema en ningun navegador ( ah y no entendí lo que quisiste decir con que es lo mismo que el k usas tu, ya que según lo que yo entiendo, no tengo que agregar ese div innecesario que solo ensucia el código), pero en fin tu eres el experto, debo seguir estudiando.

Gracias de todas formas, seguiré estudiando y quizás en un tiempo mas encuentre yo mismo la solución al problema que tengo.

jalex16 · #7 (**permalink**) 15/01/2011, 23:59

Es cuestión de gustos, el de 960.gs es más completo, no me hagas caso y profundiza más en ése para que no agregues divs innecesarios. Lo que pasa es que yo aun no logro entenderlo completamente, por eso no lo uso.
En cuanto a tu problema de las posiciones me confundí, no leí bien, pensé que querías colocar dos capas flotantes a la izquierda, una seguida de la otra, y que su contenedor crezca con ellas.

Creo que lo que intentas es hacer que la capa gris de la siguiente imagen llegue a ocupar hasta por debajo de la segunda capa azul.

Creo que esto no se puede hacer con clear (como se muestra ahi) o no sé cómo hacerlo. Posiblemente lo logres con javascript.

Si lo logras nos lo cuentas, y sorry por tanto rollo

alexisenp · #8 (**permalink**) 16/01/2011, 00:44

Exactamente eso es lo que busco hacer.
probé el código que pusiste y efectivamente no funciona =/, pensé que seria algo muy sencillo de solucionar pero al parecer no lo es.

respecto a lo del clearfix y el div "innecesario" quizas este codigo te ayude a entenderlo y así tengas tus códigos mas limpios:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Documento sin título</title>
        <style>
            .clearfix:before,
            .clearfix:after {
                content: '\0020';
                display: block;
                overflow: hidden;
                visibility: hidden;
                width: 0;
                height: 0;
            }
            .clearfix:after {
                clear: both;
            }
            .clearfix {
                zoom: 1;
            }
            .container{
                background:#aaa;
                width:300px;
                position:relative;
            }
            .foo,
            .bar{
                background:#0000ff;
                width:30px;
                height:30px;
            }
            .foo{
                float:left
            }
            .bar{
                float:right;
            }
        </style>
    </head>
    
    <body>
        <div class="container clearfix">Contenedor
            <div class="foo">1</div>
            <div class="bar">2</div>
        </div>
    </body>
</html>

Prueba agregando y eliminando el codigo en rojo y de seguro entienderas el funcionamiento del clearfix que intento usar en mi codigo.

El codigo actualizado de mi problema es el siguiente

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Documento sin título</title>
        <style>
			.clearfix:before,
			.clearfix:after {
				content: '\0020';
				display: block;
				overflow: hidden;
				visibility: hidden;
				width: 0;
				height: 0;
			}
			.clearfix:after {
				clear: both;
			}
			.clearfix {
				zoom: 1;
			}
			.container{
				background:#aaa;
				width:300px;
				position:relative;
			}
			.foo,
			.bar{
				background:#0000ff;
				width:30px;
				height:30px;
				position:relative;
			}
			.foo{
				top:0;
				left:0;
			}
			.bar{
				top:100px;
				left:50px;
			}
        </style>
    </head>
    
    <body>
        <div class="container clearfix">
            <div class="foo">1</div>
            <div class="bar">2</div>
        </div>
    </body>
</html>

Si logro encontrar una respuesta a esto claro que la compartiré aquí, y si alguien sabe como solucionar mi problema por favor lo haga saber.
saludos y gracias por todo

sanxuan · #9 (**permalink**) 16/01/2011, 09:37

Prueba a darle al contenedor que has desplazado hacia abajo (cont2) un margen inferior tan grande como el desplazamiento que le has dado verticalmente.

.cont2{
margin-bottom: 30px;
}

Lo que te está ocurriendo es facil de explicar. El navegador está situando el segundo contenedor en el lugar que ocuparía normalmente y el tamaño del contenedor principal (cont) se corresponde con esa posición. A continuación, al tener las propiedades top y left desplaza este contenedor esas cantidades desde la posición previa.
Añadiendo ese margen, obligo a aumentar el tamaño de cont tantos pixels como lo he desplazado, por lo que aparece como creo que tu esperabas que hiciera.

Espero que sea lo que buscabas.