Problema con margin-top con elementos flotantes en FF

hshadow · #1 (**permalink**) 27/03/2012, 15:21

Hola.

En FF me pasa que si pongo dos divs, llamados "A" y "B", con elementos flotantes en su interior y a "B" le asigno un margen top para que se separe de "A", "A" "imita" dicho margen y también se separa de lo que tenga arriba.

Pongo abajo el código con el problema en cuestión aislado (Sólo se presenta con el margin-top):

Código HTML:

<!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&iacute;tulo</title>
<style type="text/css">
body{
margin:0px;
padding:0px;}

.contenedor{
background-color:#000066;}

.contenedor_indiferente{
background-color:#CC0033;}

.contenedor_indiferente_left_1{
float:left;}

.contenedor_indiferente_left_2{
float:right;}

.contenedor_flotadores{
background-color:#999999}

.contenedor_flotadores_left{
float:left;}

.contenedor_flotadores_right{
float:left;}

.clear{
clear:both;}
</style>
</head>

<body>
<div class="contenedor">
	<div class="contenedor_indiferente">
       	<div class="contenedor_indiferente_left_1">
            Elemento Left 1
        </div>
       	<div class="contenedor_indiferente_left_2">
            Elemento Left 2
        </div>
        <div class="clear"></div>
    </div>
    <div class="contenedor_flotadores" style="margin-top: 10px;">
        <div class="contenedor_flotadores_left">
        	Flotador Left
        </div>
        <div class="contenedor_flotadores_right">
        	Flotador Right
        </div>
        <div class="clear"></div>
    </div>
</div>
</body>
</html>

Dado que este problema sólo está presente en FF pueden ayudarse con el FireBug para alterar el margen que puse por defecto. Verán que "A" alterará su margen "fantasma" acorde al cambio que hagan en el margen de "B".

Por cierto, si agregan mas divs "contenedor_flotadores" y cambian su margin top a una mayor cantidad, "A" imitará al mayor.

Código HTML:

 <div class="contenedor_flotadores" style="margin-top: 10px;">
        <div class="contenedor_flotadores_left">
        	Flotador Left
        </div>
        <div class="contenedor_flotadores_right">
        	Flotador Right
        </div>
        <div class="clear"></div>
    </div>
    <div class="contenedor_flotadores" style="margin-top: 15px;">
        <div class="contenedor_flotadores_left">
        	Flotador Left
        </div>
        <div class="contenedor_flotadores_right">
        	Flotador Right
        </div>
        <div class="clear"></div>
    </div>
    <div class="contenedor_flotadores" style="margin-top: 20px;">
        <div class="contenedor_flotadores_left">
        	Flotador Left
        </div>
        <div class="contenedor_flotadores_right">
        	Flotador Right
        </div>
        <div class="clear"></div>
    </div>

Hasta ahora vine zafando con absolutes y en muy contadas veces con paddings, pero quisiera conocer la solución / corrección... si es que las hay.

A mi me huele a bug de FF. Alguna idea?

Saludos.

emprear · #2 (**permalink**) 28/03/2012, 01:05

La solución pasa por darle overflow: auto a los divs, con un pequeño reset lo arreglas

Además te puse margenes adicionales para que veas que se pueden manejar a voluntad, e hice coincidir tus floats con las descripciones

Código HTML:

Ver original<!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&iacute;tulo</title>
<style type="text/css">
html, body , div{
margin:0px;
padding:0px;
border: none;
overflow: auto;
}
 
.contenedor{
background-color:#000066; margin-top: 50px;}
 
.contenedor_indiferente{
background-color:#CC0033; margin-top: 10px;}
 
.contenedor_indiferente_left_1{
float:left;}
 
.contenedor_indiferente_left_2{
float:right;}
 
.contenedor_flotadores{
background-color:#999999}
 
.contenedor_flotadores_left{
float:left;}
 
.contenedor_flotadores_right{
float:right;}
 
.clear{
clear:both;}
</style>
</head>
 
<body>
<div class="contenedor">
    <div class="contenedor_indiferente">
        <div class="contenedor_indiferente_left_1">
            Elemento Left en A
        </div>
        <div class="contenedor_indiferente_left_2">
            Elemento right en A
        </div>
        <div class="clear"></div>
    </div>
    <div class="contenedor_flotadores" style="margin-top: 10px;">
        <div class="contenedor_flotadores_left">
            Flotador Left en B
        </div>
        <div class="contenedor_flotadores_right">
            Flotador Right en B
        </div>
        <div class="clear"></div>
    </div>
</div>
</body>
</html>

Saludos

hshadow · #3 (**permalink**) 28/03/2012, 08:23

Gracias.

Lo arreglé poniendo un div con line-height:0px arriba del div que debía tener el margin-top. No se por que pero tiene que ver con que en FF un elemento no puede marginarse desde arriba simplemente con el borde de aquello que lo contiene, por lo que hay que agregar algo "solido" arriba del mismo como para que ahí sí pueda distanciarse o bien usar padding-top. Esto que digo se nota si al div contenedor le pones un fondo de color. Verás que el margen no se torna de ese color sino blanco (color de fondo del body por default) marginándose, sí, pero no desde el borde sino desde lo que tenga arriba.

Dejo abajo el código con mi solución.

Igualmente gracias por tu respuesta. Ya le daré un par de intentos también.

Código HTML:

<!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&iacute;tulo</title>
<style type="text/css">
body{
margin:0px;
padding:0px;}

.contenedor{
background-color:#000066;}

.contenedor_indiferente{
background-color:#CC0033;}

.contenedor_indiferente_left_1{
float:left;}

.contenedor_indiferente_left_2{
float:right;}

.contenedor_flotadores{
background-color:#999999}

.contenedor_flotadores_left{
float:left;}

.contenedor_flotadores_right{
float:left;}

.clear{
clear:both;}
</style>
</head>

<body>
<div class="contenedor">
	<div class="contenedor_indiferente">
       	<div class="contenedor_indiferente_left_1">
            Elemento Left 1
        </div>
       	<div class="contenedor_indiferente_left_2">
            Elemento Left 2
        </div>
        <div class="clear"></div>
    </div>
    <div style="line-height:0px">&nbsp;</div>
    <div class="contenedor_flotadores" style="margin-top: 10px;">
        <div class="contenedor_flotadores_left">
        	Flotador Left
        </div>
        <div class="contenedor_flotadores_right">
        	Flotador Right
        </div>
        <div class="clear"></div>
    </div>
    <div class="contenedor_flotadores" style="margin-top: 15px;">
        <div class="contenedor_flotadores_left">
        	Flotador Left
        </div>
        <div class="contenedor_flotadores_right">
        	Flotador Right
        </div>
        <div class="clear"></div>
    </div>
    <div class="contenedor_flotadores" style="margin-top: 20px;">
        <div class="contenedor_flotadores_left">
        	Flotador Left
        </div>
        <div class="contenedor_flotadores_right">
        	Flotador Right
        </div>
        <div class="clear"></div>
    </div>
</div>
</body>
</html>

Saludos.