Ocultar artículos sin cortarlos

[metacortex]

Estoy haciendo una página de ancho elástico. A la izquierda tiene una capa de ancho fijo y dejé que la capa derecha estire y encoja según el navegador del usuario.



El asunto es que cuando cambia el ancho del navegador, la página adquiere este aspecto que crea un feo espacio blanco a la izquierda:



Lo ideal sería asignar altura máxima en ambas capas para que se vean parejas y darle un overflow:hidden a la de la derecha, pero es peor porque resulta esto:



Me pregunto si hay alguna manera de ocultar el artículo de la derecha en vez de cortarlo. Siendo así las personas con menos ancho de pantalla verán menos artículos y la maquetación de la página se mantiene. Es decir, que alguien con 800 x 600 vea algo así:



Disculpen si fui algo exagerado en los gráficos pero temía no explicarme correctamente. Agradecería alguna sugerencia para solucionar esto. "Zapatero a su zapato", por eso llevo muchas horas intentándolo sin éxito . Lo único que he conseguido es una jaqueca y un montón de ventanas abiertas por los tutoriales.

[PatomaS]

Hola

Podrías usar la propiedad de max-height para determinar la altura de las cajas que quieras, sin embargo esto presenta varios problemas, uno es que explorer lo interpreta ... a su manera, ignorando directamente la existencia de la definición en algunas de sus versiones. Otro problema, y este es aun más complicado, es que el valor de las cajas es un valor referencial al valor calculado para las líneas y el contenido en ellas, con lo que debes tener al menos una definición de valor absoluto para las letras, ya sea en el body o en el html; mejor el body.

Personalmente, aplicaría una solución híbrida, es decir, usando javascript.

Define las cajas de manera que se vean adecuadamente en 1024 o más y establece los valores mínimos que te convengan, de esa manera habrás cubierto los navegadores y versiones que se atengan bien a los estandares. Para los que no los entienden bien, coloca unas "escuchas" de javascript, las cuales redimensionarán las cajas que quieras a los tamaños necesarios, esto te cubrirá el resto de navegadores.

Si tratas de hacer el javascript sin detección de navegador, es decir, sin navigator.appname sino en base a propiedades, por ejemplo "addEventListener(DOMContentLoaded)", eso hará una mejor detección de los métodos de los navegadores, es decir, no dependerás de lo que un navegador envíe en una cabecera http, ya que esto puede ser mentira, dependerás de su verdadero soporte de javascript.

No se si me expliqué adecuadamente en las soluciones, puede que el sueño ya me esté venciendo a esta hora...

Antes de irme a dormir, otra solución, puede ser este truquillo que reune varias técnicas, es bastante efectivo y sencillo en líneas generales.

Espero te sirva.

Felicidad

[metacortex]

Gracias PatomaS. Desde esta tarde ya estaba explorando el javascript para solucionar esto. Una de las últimas ideas fue lanzar la segunda columna debajo de la primera cuando la pantalla se pusiera muy estrecha, pero no lo logré. Al final decidimos usar anchos fijos y problema 'resuelto'.

Lo más seguro es que posteriormente vaya haciendo las modificaciones. El link que pusiste está muy bueno.

Saludos.