Div colapsar al usar float

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.Div colapsar al usar float

¿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>

Fuente

2009-03-12 Martin

@Oriol - Esta pregunta se abrió el 12 de marzo de 2009. La otra pregunta se abrió el 14 de enero de 2010. La pregunta abierta el 14 de enero de 2010 debería ser el duplicado, no este. – Martin

Cerré esta pregunta y no la otra porque la otra es más "popular" (mucho más votos, visitas y favoritos). Tenga en cuenta que no hay nada de malo en tener una pregunta cerrada como un duplicado. – Oriol

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 principal:

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

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

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

Desde "overflow: auto" puede producir barras de desplazamiento en ciertos casos, por lo general evito explícitamente que especificando 'overflow: hidden' en elementos secundarios. Esto funciona de manera confiable en mi experiencia.

Fuente

2009-03-12 18:42:14 guns

¡Guau! ¡Funciona! ¡Gracias! :RE – Martin

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 recipiente. Por lo tanto, div # actions no tiene ninguna altura cuando los otros dos divs están flotando.

Fuente

2009-03-12 18:40:20 Joel

No funciona en IE y FF. – Martin

Lo siento. Tenía el div en el lugar equivocado. – Joel

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

Fuente

2009-03-12 19:04:55 AaronSieb

Un elemento no flotaba no tendrá ningún altura si sólo 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.

Fuente

2009-03-27 05:43:13

Respuesta

Cuestiones relacionadas