Foros del Web - Ver Mensaje Individual - Problema con margin-top con elementos flotantes en FF

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.