Ver Mensaje Individual
  #4 (permalink)  
Antiguo 03/08/2006, 10:16
Nigel
 
Fecha de Ingreso: agosto-2006
Ubicación: Madrid
Mensajes: 95
Antigüedad: 17 años, 8 meses
Puntos: 0
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

Última edición por Nigel; 03/08/2006 a las 10:46