min-width en internet explorer (II)
En el post anterior hablabamos de la propiedad min-width de CSS, bueno, realmente hablabamos de la falta de esa propiedad en Internet Explorer, y dábamos una solución provisional usando javascript embebido en nuestra hoja de estilos.
Pues bien, deseoso de desfazer entuertos busqué un poco una solución más elegante y dí con este artículo de Stu Nicholls en CSSPlay
La solución sin javascript
Para comprender en que consiste esta solución es necesario comprender el modelo de cajas de CSS, así que si te suena a chino, te recomiendo que leas "El modelo de cajas" en diseñorama donde se explica mucho mejor de lo que yo pudiera hacerlo nunca.
Pues bien, la idea de Stu Nicholls para simular min-width es tan simple que te hace sentir idiota por no haberte dado cuenta tu antes.
Todo se basa en un detalle, por mucho que juguemos con la ventana del navegador, o cambiemos las dimensiones de un elemento, el ancho real jamás será mas pequeño que el ancho de sus bordes!!
Aqui tenemos una capa simple con un borde exagerado:
-
div#contenedor{
-
border:solid 1px #CCC;
-
border-left:solid 200px #F00;
-
}
El borde izquierdo hace de "tope" circunstancial e impide que el ancho de la caja mida, menos que el mismo.
Aqui os dejo un ejemplillo para que redimensioneis la ventana del navegador a gusto y veais de lo que hablo.
Incluso si somos malos y tratamos de forzar dos reglas contradictorias, el ancho de borde se impondrá sobre las demás.
-
div#contenedor{
-
border:solid 1px #CCC;
-
-
border-left:solid 200px #F00;
-
width:100px; /*Esto es incongruente con el ancho de los bordes, segun el modelo de IE*/
-
}
Pues con esto nos aseguramos que, llueve, truene o haga sol, mi caja jamas de los jamases medirá menos de 200px;
Veamos ahora, como usar esto para simular un min-width cross browser:
el marcado:
-
<div id="contenedor">
-
<div id="main">
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis enim. Suspendisse non velit. Nullam non purus. Nulla iaculis mauris id nibh. Nulla facilisi. Aenean tincidunt dolor vitae ligula. Morbi euismod erat a sem. Proin dui. Sed tempus urna bibendum nulla. Quisque feugiat pede sit amet nulla. Quisque sodales. Vestibulum mollis, augue vitae venenatis nonummy, magna enim sodales lectus, at nonummy pede metus in felis. Vestibulum consectetuer suscipit ligula.
-
</div>
-
</div>
Vamos a usar la capa #contenedor para simular el ancho minimo y la capa #main como contenedora del resto de nuestra página.
Lo primero sería aplicar un borde igual al ancho minimo deseado a la capa #contenedor, así:
-
#contenedor {
-
border-left:400px solid #FFF;
-
position:relative;
-
float:left;
-
}
Tendremos un ancho mínimo de 400px, del mismo color que nuestro body, en este caso blanco. Es una pena que IE no admita el valor transparent.
Esto nos deja algo parecido a esto, (he coloreado las capas para que se vea bien)
Si consiguieramos que la capa #main no se viera atrapada por la capa #contenedor, y se desplazara hasta la izquierda...
-
#main {
-
margin-left:-400px;
-
}
Por motivos que no alcanzo a entender; para que todo vaya bien en Internet Explorer, tenemos que añadir position:relative; float:left a cada capa.
Con lo que nuestra hoja de estilos queda asi:
-
#contenedor {
-
border-left:400px solid #FFF;
-
position:relative;
-
float:left;
-
}
-
#main {
-
margin-left:-400px;
-
position:relative;
-
float:left;
-
}
Si quieres jugar un poco con el resultado final puedes verlo en acción o descargartelo en zip.
Un apunte final
Aunque esta solución ensucia nuestro código con una capa innecesaria, obligandonos así a mezclar contenido y presentación, es bastante más accesible que la basada en javascript y desde el punto de vista del estudio es mucho más interesante.
Personalmente, me encantaría que en la versión 7 de IE se solucionara el problema de min-width (parece que es así) y no tener que recurrir a estos trucos sucios.
Comentarios
Lo probé y si funciona, excepto que en IE6 parece quedar el “Borde” por encima de todo.
No se si hice mal, cosa que no creo.
Hasta ahora yo tengo una solución “arcaica”, de puro HTML, y de verdad quería que funcionara esta.
16 Mayo 2008 Sebastian
Y eso sin mencionar que (quizás son ideas mias) que de esta forma ahora es como que “menos liquida”.
Por lo menos mientras se redimensiona se ve menos fluido y pesado.
16 Mayo 2008 Sebastian