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

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