CSS max-width con porcentaje

max-width con un porcentaje no parece funcionar en IE 8 o Firefox 3. Anchos de píxeles específicos funcionan bien. ¿Me estoy perdiendo de algo?CSS max-width con porcentaje

Tengo un formulario de entrada, y quiero mostrar un texto explicativo a la derecha del mismo. Pero no quiero que el texto explicativo aplane la forma.

No he utilizado el ancho máximo anteriormente, pero me pareció una excelente solución. Escribí este estilo CSS simple:

div.hint {max-width: 50%; float: right;}

Entonces escribió:

<div class=hint>... hint text</div> 
<form action=xxx method=post> 
... etc ...

El div.hint aplasta la forma severa a la izquierda.

Intenté esto con solo un texto en lugar del formulario. El div.hint ocupa aproximadamente el 95% de la pantalla, solo da un pequeño margen a la izquierda, y luego el otro texto se coloca completamente debajo.

Si cambio el ancho máximo de un porcentaje a un número fijo de píxeles, parece que funciona. Pero no quiero basarlo en píxeles porque no conozco las dimensiones del navegador del usuario.

¿El porcentaje no funciona con ancho máximo a pesar de lo que leo en la documentación, o me falta algo?

En respuesta al comentario de Seanmonster: Aquí, voy a dar una página web completa trivial, pero que ilustra lo que pensé que debería funcionar, pero no:

<html><title>Max width test</title> 
<style> 
.form {max-width: 75%; float: left;} 
.hint {max-width: 50%; float: right;} 
</style> 

<div class=hint> 
<p>Fourscore and seven years ago our forefathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that 
all men are created equal. We are now engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, 
can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting place 
for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. Etc. 
</div> 
<div class=form> 
<table> 
<tr><th>Label 1 <td>Value 1 
<tr><th>Label 2 <td>Value 2 
<tr><th>Label 3 <td>Value 3 
</table> 
</div> 
</html>

Al abrir esta página en un navegador, obtengo, no dos columnas, sino el div "pista" que toma el 100% del ancho, y debajo el div "forma" que toma el 100% del ancho. Si cambio tanto el ancho máximo como "ancho: 50%", obtengo dos columnas como era de esperar. Aparentemente me falta algo sobre cómo se supone que funciona el ancho máximo, pero ... no lo entiendo.

Fuente

2009-10-04 Jay

Con la información que has dado, su problema no debería existir. Tal vez nos puedas un enlace a un ejemplo para que podamos ver que sucede en la naturaleza. – seanmonstar

Abrí tu código de ejemplo en FF3.5.3 en una Mac y PC y funcionó bien. Obtengo el comportamiento que describes en IE 7 y no tengo 8 para probar. – Emily

@Emily: Solo probé el ejemplo anterior con IE 8 antes de publicarlo. Tomaré tu palabra de que funciona con Firefox. Pero probé otros ejemplos similares que fallaron de manera similar con Firefox, por lo que aparentemente no son totalmente inmunes a la causa raíz aquí.En cualquier caso, realmente quiero algo que funcione con al menos IE 7, IE 8 y Firefox 3, ya que probablemente sean los navegadores más populares. – Jay

max-width en IE8 tiene errores en varios escenarios. Se trata de un problema conocido.

Puedes encontrar un artículo sobre este tema aquí. http://edskes.net/ie8overflowandexpandingboxbugs.htm

se necesitan tres cosas para desencadenar este error - maxwidth, barras de desplazamiento, y flotar

Fuente

2009-10-13 20:42:04 diadem

como dijo seanmonstar, también debes estar cansado de los elementos externos. En los viejos tiempos (ie-7), si tenía un ancho del 100%, se expandía tanto como podía. En los días nuevos, los elementos tienen un valor predeterminado de nada, lo que significa que necesita que todos los elementos circundantes tengan un ancho del 100% también; no se supone. – diadem

Creo que el error se produce en más situaciones de las indicadas en esa publicación porque lo he obtenido, por ejemplo, tratando de hacer aquellas con una tabla de dos columnas en lugar de utilizar float. Pero gracias: saber que es un error conocido y no solo que me estoy volviendo loco no resuelve el problema, pero al menos me dice que busque una solución totalmente diferente. – Jay

@Diadem: Intenté modificar el ancho del elemento principal al 100% en uno de mis casos de prueba y no me ayudó. Ciertamente es posible que con la combinación correcta de configuraciones funcionaría y no lo logré. Ah, bueno, creo que voy a abandonar el ancho máximo hasta que aparezcan nuevas versiones de navegador. – Jay

El ancho máximo funciona perfectamente bien en FF3 e IE8 con porcentajes. Los porcentajes, sin embargo, se basan en el ancho principal. No hay niños alrededor.

Fuente

2009-10-04 21:54:28 seanmonstar

Para obtener los mejores resultados, asegúrese de que el ancho principal sea un valor estático. –

Niños a su alrededor? Esto realmente no tiene sentido ... ¿Te refieres a hermanos? –

Si tuviera que hacer flotar div.hint y formar ambos a la izquierda y tenerlos a ambos con un ancho máximo de 50%, no deberían aplastarse entre sí.

<div> 
    <div class="form" style="float:left; max-width:50%"> 
    <form></form> 
    </div> 
    <div class="hint" style="float:left; max-width:50%"> 
    </div> 
</div>

Fuente

2009-10-11 23:11:32 CMN

Bueno, lo intenté. Y el primer div obtiene el 100% del ancho de la pantalla y viene arriba; el segundo div viene debajo con el 100% del ancho de la pantalla. Es como si se omitiera por completo el ancho máximo. Si cambio "max-width" a "width", entonces funciona, excepto por supuesto que los anchos son fijos en lugar de variables. – Jay

Respuesta

Cuestiones relacionadas