¿Hay una forma de ancho 0 para evitar que los divs flotantes se colapsen?

Question

Primero, este problema no se trata de elementos de bloques que se colapsan cuando sus hijos se flotan. De hecho, el problema no tiene nada que ver con la compensación en absoluto.

El problema es este. Supongamos que tengo una serie de divs flotantes como:

<div class="column">Column 1</div>
<div class="column"></div>
<div class="column">Column 3</div>

Con css:

div.column { float: left; width: 200px; }

La columna central colapsará en las versiones recientes de Firefox y Safari, aunque aparentemente no es IE7. Lo que quiero es el comportamiento de IE7.

Me doy cuenta de que puedo agregar un & amp; nbsp; y mantendrá abierto el div, pero eso no funciona para mí en este caso porque también tengo una declaración como esta:

div.column input { width: 100% }

Tengo una serie de columnas en formato de tabla, con ciertas condiciones que hacen que los campos de entrada desaparezcan. El problema es que cuando la entrada desaparece, el campo se colapsa. Si agrego un & amp; nbsp; hace que el div se ajuste. Solo para evitar las preguntas iniciales:

• ¿Por qué no uso una tabla en su lugar? Porque estoy usando Scriptaculous Sortable para arrastrar y soltar filas, que no funciona con tablas
• ¿Por qué no uso un ancho de píxel más corto para dejar espacio para un & amp; nbsp; ? Debido a que width: 100% es más precisa en todos los navegadores.
• ¿Por qué no agrego un & amp; nbsp; cuando oculto la entrada puedo terminar recurriendo a esto, pero sería algo feo en el JS, así que espero una mejor manera.

¿Alguien tiene hacks inteligentes aquí? Dado que tanto Safari como Firefox se comportan de esta manera, asumo que este es un comportamiento oficialmente aprobado. ¿Dónde se discute esto en las especificaciones del W3C?

Answer 1

Eh? ¿No deberías simplemente darle una altura aleatoria? ¿Puedes mostrar una demo?