¿Como haríais una web que se adapte a la resolución de cada monitor?

indie81 · #1 (**permalink**) 03/08/2006, 04:29

Tengo una web con 3 columnas. La de la izquierda y derecha son de tamaño fijo de 150px, y quiero que el centro sea más o menos ancho según la resolución del monitor en que se vea la web, adaptándose.

He puesto a la columna izquierda float:left, a la derecha float:right, y sus anchuras fijas. La del centro no tiene declarado ninguna anchura ni ningún float, solo tiene un margin a la izquierda de 160px, para que no salga por encima de la columna izquierda.

La parte izquierda queda bien, pero la columna derecha, no se por qué, se baja, quedando el centro ocupando toda la pantalla hacia la derecha, y la columna derecha debajo, descolocada.

A ver si me podéis decir cómo haríais este diseño flexible. No hace falta que me pongáis todo el código de la página, simplemente los datos importantes que pondríais en el css de cada uno de los 3 divs: anchuras, floats, margins, o lo que sea necesario.

Gracias!

kazafun · #2 (**permalink**) 03/08/2006, 05:00

Mira como lo hace Matthew Levin. Este articulo es una maravilla.
http://www.alistapart.com/articles/holygrail/

indie81 · #3 (**permalink**) 03/08/2006, 05:15

Es que si la web la hubiese hecho yo desde el comienzo sería muy fácil, pero es una web ya hecha, hace bastante tiempo, con el css muy lioso, y tengo que hacerla líquida modificando su css.

Lo he hecho con el mismo método que en este ejemplo:
http://www.intensivstation.ch/files/...es/temp05.html

Y me sale bien la columna izquierda y el centro, que ya es flexible. Pero a la derecha, sale un hueco en blanco, y la columna derecha sale más abajo, empezando justo cuando termina el contenido de la web. Voy a poner una captura de cómo me sale, y a ver si sabéis qué motivos pueden llevar a que la columna derecha no salga arriba del todo, como debería ser:

Nigel · #4 (**permalink**) 03/08/2006, 10:16

Hay varias soluciones para realizar las tres columnas.

1 - La primera, y más cutre, es que, por ejemplo, la columna de la derecha tenga posicionamiento absoluto. Te resolverá el problema, pero no podrás adaptar correctamente el pie de página.

2 - La solución correcta, pasa por que la columna de la izquiera tenga "float:left", la de la derecha, "float:right", y la central, "width:auto", y los margenes izquiedo y derecho adaptado para que no se coma ambas columnas. El problema en esta solución, es que dentro del código HTML, las dos columnas laterales deben ir antes de la central, o de lo contrario, te ocurrirá que la columna derecha se te posicionará debajo de la central, como ocurre en la foto.
Sin embargo, tienes el problema de que los elementos con propiedad "float" se salen del flujo del documento, y los posteriores elementos no se adaptan a ellos. Es decir, los siguientes elementos (como pie de página, etc...) se adaptarían a la altura de la columna central. Para resolverlo puedes emplear un pequeño truco. Te resumo el proceso entero en unos sencillos pasos, y te paso un enlace a un ejemplo que he creado:

* Crear un div contenedor de las tres columnas
* Crear columna izquierda (float:left, anchura fija)
* Crear columna derecha (float:right, anchura fija)
* Crear columna principal (anchura variable y margenes a izquierda y derecha mayores que las anchuras de las columnas laterales)
* Crear un elemento div, dentro del contenedor, con la propiedad "clear:both". Esta propiedad obliga al div a no tener nada a izquierda y derecha suyos, por lo que se coloca debajo de las tres columnas, y al estar dentro del div contenedor, le obliga a adaptar su altura al máximo de las tres columnas en conjunto. Así, los restantes contenidos se colocarán por debajo de todas las columnas.

El enlace: (mods.solzimer.es/david/examples/threecolumn.html)
Perdona por ponerlo así, pero al ser nuevo, no me deja poner enlaces xD

indie81 · #5 (**permalink**) 04/08/2006, 01:20

Cita:

Iniciado por Nigel

El problema en esta solución, es que dentro del código HTML, las dos columnas laterales deben ir antes de la central, o de lo contrario, te ocurrirá que la columna derecha se te posicionará debajo de la central, como ocurre en la foto.

Claro!!! era eso! joder, y mira que es de los primeros "trucos" que aprendí en css, que se debían colocar las columnas laterales antes en este tipo de diseños, pero ya ni me acordaba. Ahora sí se ve bien.

Gracias!