Gracias por tu explicación, Mikmoro, pero discrepo en lo de que las únicas medidas relativas son los porcentajes. Los píxeles, los
em y los
ex también lo son, ya que serán diferentes según el sistema [
Aquí mismo las definen como relativas]. Lo que pasa es que son relativas con respecto a cosas distintas.
Los porcentajes son relativos a otro porcentaje, teniendo en cuenta que el 100% sería el primer contenedor, el espacio del navegador para el documento HTML (por eso con los porcentajes la página va cambiando si cambias el tamaño de la ventana del navegador).
Los píxeles son relativos al pixel de la pantalla. Si los píxeles son más pequeños (igual tamaño de pantalla pero más resolución) las cosas se verán más pequeñas, y viceversa, pero las proporciones deberían respetarse.
Lo mismo pasa con
em y
ex, sólo que estos son relativos al tamaño en puntos de la fuente normal del sistema o del navegador.
Las medidas absolutas serían medidas como los centímetros, las pulgadas, etc., ya que su medida no depende del tamaño de la fuente predeterminada, de la resolución de la pantalla o del tamaño de la ventana del navegador, sino de un patrón externo.
Comprendiendo bien todo esto, lo único que hice fue ponerle a las tablas que se solapaban con el recuadro de información un
max-width de 35em (el recuadro ocupa 17em de un total de 56em, y he dejado 4em para márgenes). Es de suponer que los
em deberían respetar también las proporciones... y si no es así supongo que será por factores que no he tenido en cuenta. Y, ahora que me fijo, la tabla tiene texto en negrita en sus encabezados, y puede que sea ese uno de los factores, ya que el texto en negrita quizá ocupe más en un monitor más pequeño (vamos, que no se me ocurre nada mejor).
El solapado del título con el menú, que era el problema original de este hilo, lo he solucionado poniéndole un
max-width del 50% al título, de tal forma que si necesita más espacio se corte en dos líneas.
Ahora todo se ve perfectamente en los tres monitores.
Muchas gracias por vuestra ayuda!