Los flotadores CSS con anchos desconocidos no ajustan los espacios en blanco con el tipo de documento

Question

Dos divs, flotando hacia la izquierda, de ancho desconocido.Uno de ellos tiene más contenido del que cabe en la página, por lo que se mueve debajo del primero (excepto en IE):

http://corexii.com/floatproblem/float.html

Agregar display:inline-table;y el grande envuelve su contenido (consistentemente en todos los navegadores):

http://corexii.com/floatproblem/table.html

Pero introduzca un tipo de documento (no solo estricto, CUALQUIER tipo de documento) y ya no aparecerá en Firefox:

http://corexii.com/floatproblem/doctype.html

¿Cómo consigo que el div correcto envuelva su contenido mientras uso un tipo de documento al mismo tiempo, de manera confiable en todos los navegadores?

Answer 1

  

¿Cómo consigo el div derecho a envasar su   contenido durante el uso de un tipo de documento en el   mismo tiempo, de forma fiable en todos los navegadores?

Sin definir anchos, no puede . Me gustaría recomendar anchos porcentuales en este caso, sino que depende de usted.

El ancho predeterminado para un div es 100% de su contenedor (en este caso la página). La primera div va a terminar su tamaño real a menos que usted tamaño de la página para que sea menor que su anchura inherente. Esperando al otro lado de la consistencia de los navegadores sin un tipo de documento completo y válido es simplemente un ejercicio de futilidad.

Answer 2

CSS no puede hacer todo lo que pueden hacer los diseños basados ​​en tablas.Por un lado, los diseños de ancho dinámico son mucho más complicados.Los diseños sin tablas siguen siendo preferibles en el 98% de los casos, pero si realmente necesitas este tipo de diseño de ancho dinámico, es posible que tengas que usar una tabla.

Los anchos inconsistentes, si no se proporcionan cuidadosamente, no son muy buenos desde el punto de vista estético, por lo que es posible que esté solucionando el problema equivocado.

Answer 3

Usted podría comenzar mediante la inclusión de un elemento BODY.

Traingamer le ha dado una explicación del comportamiento de Firefox y lo que hay que hacer para conseguir el resultado deseado. Es posible escuchar a él en vez de ir por la tangente acerca de CSS siendo imposible crear diseños con.

No culpes a CSS para los problemas que que son la introducción de la no adhesión a corregir las especificaciones web.