obligar a un div a contener divs secundarios flotantes

2 minutos de lectura

avatar de usuario
tic

Estoy tratando de personalizar el tema de veinte once en WordPress. Tiene un diseño de 2 columnas configurado por:

<div id="main">
     <div id="primary"></div>
     <div id="secondary"></div>
</div>

y

#main {
    clear: both;
    padding: 1.625em 0 0;
}
#primary {
    float: left;
    margin: 0;
    width: 100%;
}
#secondary {
    float: right;
    margin-right: 7.6%;
    width: 18.8%;
}

No estoy seguro de que haya otras propiedades css relevantes dentro style.css que no he reconocido. De todos modos, los niños se encuentran afuera. #main. ¿Cómo puedo obligar a tener los divs secundarios contenidos en #main? (aparte de reducir el ancho de #primaryque no produce ningún efecto para mí)

  • Tres respuestas igualmente aceptables. Por favor, sugiérame cuál vale la pena el cheque de “respuesta aceptada”.

    – tic

    21 de agosto de 2012 a las 14:28

avatar de usuario
Licuadora

Necesitas agregar overflow: auto a #main:

#main {
    clear: both;
    padding: 1.625em 0 0;
    overflow: auto;
}

  • ¿Por qué funciona esto? MDN y W3 son un poco confusos acerca de lo que overflow: auto hace (además de decir que depende de UA) y tengo miedo de usar CSS que no entiendo. overflow: hidden y overflow: scroll ambos parecen lograr el mismo efecto, pero no sé por qué ellos trabajo, tampoco.

    –Mark Amery

    31 de marzo de 2015 a las 19:11


  • Ese enlace (que ya encontré desde la publicación) en realidad no contiene ninguna explicación de por qué (prácticamente solo dice ‘vaya, esto funciona’), pero hay un intento de explicar la mecánica en stackoverflow.com/a/16056509/1709587 que parece decente de un vistazo. Necesito leer más.

    –Mark Amery

    31/03/2015 a las 20:01


  • Anteriormente comenté que esto no funcionaba en las versiones actuales de Chrome; esto estaba mal, pero debe asegurarse de que su elemento tenga display: block para que funcione. También puedes usar display: flow-rootpero el apoyo para ello no es genial

    – Jules

    16 de febrero de 2018 a las 9:41

avatar de usuario
leben

Debe usar el método clearfix con pseudo-elemento: después porque en su caso, el claro no se aplica realmente después de los niños.

#main:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; 
}

http://jsfiddle.net/zfsjb/

EDITAR 2020:

Desde hace un tiempo, esta solución más simple funciona igual de bien:

#main::after {
    content: "";
    display: table;
    clear: both;
}

También ahora se recomienda usar ::after en vez de :after para que coincida con otros pseudo-elementos.

  • ¡Perfecto! Gracias. He estado buscando esto durante años. Evité overflow:auto ya que a veces terminaba con barras de desplazamiento inesperadas y creo que este uso de overflow es oscuro. Y a veces terminé usando el viejo truco de nbsp; en el contenedor. Su CSS tiene sentido lógico para mí.

    – john blair

    4 de abril de 2020 a las 13:19

  • esto es increíblemente hermoso

    – ViajandoAries

    3 de noviembre de 2020 a las 6:46

intenta dar width: 100%; position:absolute a #main.

Aquí es una demostración en vivo que funciona

en algunos casos, solo necesita aplicar min-height al elemento principal

¿Ha sido útil esta solución?