diseño fijo + amplio contenido = tablas?

Tengo una página web que tiene un diseño de ancho fijo. Usó tablas antes y lo recreé usando divs. En general, estoy contento con él (el pie de página se pega ahora al fondo).

Pero hay un problema: no puedo controlar el contenido y, a veces, puede contener elementos muy amplios. En el diseño actual (divs), si el elemento no se ajusta a la pantalla, tiene que desplazarse hacia la derecha (no puede evitar eso) y al final del marco de página, verá espacio en blanco (es decir, sin encabezado, pie de página).

La causa de esto es que div solo se expande a la ventana visible.

Solo veo dos opciones de cómo resolverlo:

  • volver al diseño de las tablas. Funcionaba correctamente para este caso: se expandía más allá del marco de la ventana si el contenido era más amplio.
  • implementar una solución de JavaScript que verificará el ancho y lo ampliará si es necesario. Pero creo que está mal.

¿Hay alguna forma mejor de resolverlo? Me gustaría lograr un comportamiento similar al de las tablas, pero usando divs.

Y avíseme si necesita más información, gracias.

EDITAR: Lo necesito trabajando en IE6 (o al menos IE7 si IE6 no se ve feo) y más arriba + todos los navegadores modernos.

EDIT2: Aquí hay un ejemplo donde puedes ver de lo que estoy hablando: http://jsfiddle.net/wxrJU/6/ . Si se desplaza hacia la derecha, puede ver que hay espacio en blanco; el marco divs no se expande. Si alguien pudiera proporcionar la solución implementada en jsfiddle también, lo agradecería :).

Una obviedad (sp?) Sería usar CSS2 display: table; junto con valores de table-cell y tal vez de table-row (IE8 +).

Si su encabezado y pie de página no son visualmente lo suficientemente amplios cuando el contenido es muy amplio, estas son algunas opciones:

  • ver la técnica llamada faux-columns y aplicarla para crear faux-rows (lo siento por el neo-neologismo :)).
    Como su contenido puede ser de cualquier altura (a diferencia del ancho fijo con falso-columna), tendrá que aplicar múltiples fondos: uno colocado como la left top para el encabezado, otro posicionado como left bottom para el pie de página.
  • El background-size CSS3 redimensionará al ancho deseado una imagen de fondo. IE9 + de acuerdo con el gran sitio http://caniuse.com que representa más de dos tercios de los buscadores (excepto si los usuarios usan muchas IEs antiguas como en una administración o una gran compañía). Vea el tamaño de fondo de poliuretano SO para IE8-

EDITAR: se olvidó de las opciones de diseño de CSS3.

En lugar de display: table; , también puedes considerar las opciones de CSS3:

  • Módulo de diseño de caja flexible (debería funcionar para 50-60% de sus usuarios porque es IE10 +, existen polifills)
  • Diseño de columnas múltiples (lo mismo que para flexbox: IE10 +, existen polyfills)
  • demasiado pronto para Grid Layout (funciona en un solo navegador por ahora: IE10)

No he probado esto en IE6 o 7, pero podría estar moviéndose en la dirección correcta …

http://jsfiddle.net/wxrJU/10/