Aquí podría ser tu PUBLICIDAD


Colapso Div al usar flotador

votos
7

Tengo el siguiente HTML y me gustaría mostrar un fondo azul detrás de los botones y el texto. Lamentablemente, con el siguiente código, el fondo azul desaparecerá. Si elimino el CSS para los botones y el texto de ids, el fondo está de vuelta.

¿Qué estoy haciendo mal?

¡Gracias!

<!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>
    <title>Untitled Page</title>
    <style>


    #actions
    {
        background: blue;
    }

    #buttons
    {
        float: left;
    }

    #text 
    {
        float: right;
    }

    </style>
</head>
<body>

        <div id=actions>
            <div id=buttons>
                <input type=button id=btnOne value=Bla bla />
                <input type=button id=btnTwo value=Bla bla bls />
            </div>
            <div id=text>Bla bla bla</div>
        </div>

</body>
</html>
Publicado el 12/03/2009 a las 19:35
fuente por usuario Martin
En otros idiomas...        العربية       

4 respuestas

votos
11

Tienes que "limpiar" tus carrozas. Los elementos flotantes los sacan del posicionamiento de bloque normal de la página, por lo que un elemento que está flotando a la derecha se abre desde el contenedor principal, colapsando el div. Puede borrarlos, o la forma más concisa e inteligente es agregar 'overflow: auto' al contenedor padre:

#actions
{
    background: blue; overflow: auto;
}

#buttons
{
    float: left;
    overflow: hidden;
}

#text 
{
    float: right;
    overflow: hidden;
}

Dado que "overflow: auto" puede producir barras de desplazamiento en ciertas instancias, generalmente evito explícitamente eso al especificar 'overflow: hidden' en elementos secundarios. Esto funciona de manera confiable en mi experiencia.

Respondida el 12/03/2009 a las 07:42
fuente por usuario guns


Aquí podría ser tu PUBLICIDAD


votos
2

Prueba esto:

    <div id="actions">
        <div id="buttons">
            <input type="button" id="btnOne" value="Bla bla" />
            <input type="button" id="btnTwo" value="Bla bla bls" />                
        </div>
        <div id="text">Bla bla bla</div>
        <div style="clear:both;height:1px;overflow:none;"></div>
    </div>

El problema básico es que los elementos flotantes no contribuyen a la altura calculada del contenedor. Por lo tanto, div # actions no tiene ninguna altura cuando los otros dos divs están flotando.

Respondida el 12/03/2009 a las 07:40
fuente por usuario Joel

votos
0

Un elemento no flotante no tendrá altura si solo contiene elementos flotantes. Para forzar al elemento externo a estirarse y rodear los elementos flotantes, también debe flotar. La respuesta simple a este problema es flotar también el div 'acciones'. Esto extenderá el fondo como se esperaba.

Agregar un elemento extra en la parte inferior solo para eliminar los elementos flotados es innecesario y no semántico, por lo que debe desaconsejarse.

Respondida el 27/03/2009 a las 06:43
fuente por usuario Matthew James Taylor

votos
0

Más información sobre flotadores y limpieza de ellos: http://www.dave-woods.co.uk/index.php/float-and-clear-a-comparison-of-css-clearing-techniques/

Respondida el 12/03/2009 a las 08:04
fuente por usuario AaronSieb