Como aparentemente hay gente preocupada con respecto a la falta de soporte para Internet Explorer en la tecnica de combinar una diagramación líquida y elástica, he aquí la solución al problema.
99% del crédito de esta tecnica va para max-width in Internet Explorer. Es recomendable que la lean; no tiene sentido que traduzca toda esa explicación.
Cuando se trata de emular max-width usando em, el autor llega a este código:
<html>
<style>
p {
border:1px solid red;
width:expression(
document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)?
"30em":
"auto" );
}
</style>
<body>
<p>
[alot of text]
</p>Código funcionando en el ejemplo 1.
El código dentro de expression es una condicional: si el tamaño de la ventana (document.body.clientWidth) es mayor a (aproximadamente) 30 em, entonces width: 30em, caso contrario, width: auto. Justamemente este auto es la clave; si el ancho de la ventana es menor a 30em, entonces es la opción que se activa. Entonces reemplazaremos auto por una simulación de min-width.
Suponiendo que el ancho mínimo que queremos sea de 15 em, el código CSS reformateado sería
width:expression(
document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)?
"30em":
document.body.clientWidth < (250/12) *
parseInt(document.body.currentStyle.fontSize)?
"15em":
"auto" );Entonces ahora expression primero pregunta si el ancho de la ventana es mayor a (aproximadamente) 30 em. Si no lo es, vuelve a preguntar si el ancho de la ventana es menor a (aproximadamente) 15 em. Si es el caso, entonces width: 15em, caso contrario, width: auto.
El autor aclara el valor 500 (en (500/12)) hay que calcularlo según el ancho en em que queremos usar. Sabiendo que 500 se corresponde con 30 em, supongo que sólo les queda hacer un regla de 3 simple.
Pueden ver este código funcionando en el ejemplo 2.