[Ovillo] Trabajar con EMs

[Ramón Corominas]

Hola, Hernán y todos.

> Sí, 10% del algo es "muy poco" de ese algo, ¿qué tal 50%? ¿40 y 60%?
> ¿30 y 70%?
>   
¿Y qué tal si soy yo quién decide cuánto quiere que mida cada columna en 
MI diseño? 10% es poco según para qué cosas, en algunos casos puedo 
querer un menú minimalista (o lo ha querido el diseñador), que mida tan 
poco como eso, o incluso menos (ver el ejemplo más abajo). El tema creo 
que es aportar una solución que sea válida también para los casos 
extremos, y no poner tú las condiciones de lo que puedo o no puedo diseñar.
> ¿Quién defiende el DIEZ por ciento? Yo no. Dije 20/80%. Pero pongamos 
> 30/70, o 60/40. Díme tú cuánto quieres y te lo hago, hombre! Quiero ese 
> número que te dejaría "contento"!...
>   
YO defiendo el 10%, de hecho defiendo el 7%, porque sí, porque quiero 
que sea ese el tamaño por defecto de mi menú. Y quiero que si se amplía 
la fuente no se me descuadre todo, y que se lea bien, y que todo fluya y 
no haga scroll horizontal...
> ¿Qué porcentaje concreto te parecería aceptable para que yo maquete una 
> web en porcentajes a DOS columnas?
> Columna 1:____%
> Columna 2:____&
>   
Columna 1: 4.5em
Columna 2: el resto hasta el 100%

¿Por qué voy a darte porcentajes si te estoy diciendo que lo que quiero 
es otra cosa? Quiero ems, porque los ems crecen y los porcentajes no. 
Quiero que mi menú ridículamente ancho por defecto crezca grácilmente 
cuando amplíe el tamaño de la letra dejando, eso sí, menos espacio para 
el contenido, que de todos modos seguirá siendo bastante ancho.
> ¿Y qué porcentaje para una a TRES columnas?
> Columna 1:____%
> Columna 2:____&
> Columna 3:____&
>   
Por la misma razón, puedo querer 5em y 7em para las dos columnas 
laterales, y una columna central que me ocupe el resto del espacio (100% 
- 12em). Quiero que mis columnas laterales se hagan más anchas cuando se 
amplíe el tamaño de letra, y que sea la columna central la que se haga 
más estrecha. ¿Y por qué lo quiero? Pues porque me da la gana y porque 
es posible... Al menos usando tablas (o tablas CSS).

Y como es muy difícil explicar estas cosas con palabras, ahí va el 
ejemplo de lo que quiero (disculpad los márgenes, paddings, etc., sólo 
se trata de una prueba de concepto). Para las pruebas he usado Firefox 3 
(desactivando el escalado tipo zoom) en 1024x768, en IE6 me ha hecho 
cosas raras y no me voy a poner a corregirlo para lo que es...

http://www.ramoncorominas.com/ovillo/2col/

Mi conclusión es:

- DIVS1: Con porcentajes, al ampliar las fuentes más allá de un 
determinado tamaño, los contenedores se me comen el contenido.
- DIVS2: Mezclando ems y porcentajes con divs flotados, en cuanto el 
menú crece un poco el segundo div se cae (no se me ocurre ninguna manera 
de hacer que se encoja).
- DIVS3/TABLAS: Con divs simulando tablas mediante propiedades de CSS, 
obtengo lo que quiero, quedando exactamente igual que si utilizo una 
maquetación con tablas reales. Desgraciadamente, esas propiedades no 
funcionan bien con IE, por lo que la única opción cross-browser sería 
maquetar con tablas de verdad (no, no estoy recomendando eso, sólo 
exponiendo el problema).

Sí, soy consciente de que esas medidas pueden ser casos extremos, pero 
no veo la razón para no querer que algunos de los contenedores crezcan 
acorde con la fuente y que a la vez otros se adapten al espacio que 
quede. Para mí es algo realmente útil.

Nota: he visto algún diseño con CSS a dos (y tres) columnas que usa una 
técnica a través de márgenes en ems para hacer algo parecido a esto, 
pero no termina de funcionarme bien del todo, es una pena.

En fin, espero haberme explicado bien esta vez <guiño>

Un saludín,
Ramón.