3 columnas en portada, 2 en interior

[Knibal]

Hola,

Este post puede ir tanto en XHTML como en CSS, si no está bien ubicado ruego me lo mueva algún moderador por favor.

Estoy intentando maquetar una página para un periódico.

La idea es que en portada aparezcan 3 columnas con los contenidos de este modo:



Una vez que estén en alguna sección interior, la columna 3 desaparecerá (mediante php la desactivaré), de modo que sólo queden la 1 y la 2, ocupando la primera el espacio dejado libre por la 3, es decir, una página interior ha de verse así:



Llevo todo el día dándole vueltas pero no consigo que la columna principal varíe su ancho según una u otra circunstancia.

Si alguien puede echarme una mano le estaré eternamente agradecido :)

Gracias!

[DragonX]

no entiendo cuál es el problema? no podes hacer las 3 columnas o no podes hacer 2 de 3?

Tenes algo hecho? podmeos verlo?

[Knibal]

Siento no poder mostraros, estoy desarrollando el sitio en un servidor local, pero amplío un poco más. La maquetación es para Joomla.

En cada columna se cargaran una serie de módulos uno debajo de otro.

En portada estarán activas las 3 columnas, pero cuando se entra a una sección interior, para dar más espacio al contenido, la columna 3 desaparece (con "php if modules count...")

El problema está en que si declaro un ancho fijo a la columna 1, cuando la 3 desaparece, la 1 no ocupa todo el espacio sobrante, sino que se queda al mismo ancho.

Si le aplico 100% de ancho, me saltan de linea las otras dos columnas.

El problema es además que el contenedor tiene un ancho fijo, no como en el caso que propone kseso que lleva width 100%, por tanto, tiene que fluir el tamaño de la columna 1 pero siempre adaptándose a ese ancho máximo del contenedor.

[kseso?]

Bueno, ya lo siento que no te sirva.
Lo borro, entonces, ya que no puedes cambiar cuatro width (ya sean a px o %)

[Knibal]

kseso agradezco tu ayuda, pero no entiendo tu cabreo.

Dije que a priori pensaba que no me servía ese código porqua ya había experimentado con widths al 100% y no me funcionaban.

De todas formas, copié el código antes de que lo eliminaras (?¿), así que de nuevo gracias, e intentaré darle una vuelta.

[Mikmoro]

No importa en absoluto que el contenedor tenga ancho fijo: en realidad lo importante es cómo pongas las columnas interiores, y en eso sí te sirve el ejemplo de kseso? (la maquetación a 3 columnas simple).
¿Por qué? porque el truco está en que las columnas izquierda y derecha ocupan un ancho fijo, siendo flotadas respectivamente a derecha e izquierda, y la central ocupa el resto disponible sin flotar. De esa manera, si desaparece la izquierda, aun así la central ocuarpá todo el ancho disponible, incluído lo que deja libre la derecha.

Si no puedes adaptar esto, aun tendrías otra posible solución:
creo que en joomla el contenedor principal es "main" y en en interiores "main2", o algo así. De cualquier modo, hay una diferencia en el contenedor.
Pues bien, podría hacer que una columna tenga unas propiedades cuando esté en main y otra cuando esté en main2:

#main .col_central {width: 150px... etcétera}
#main2 .col_central {width: 300px... etcétera}

Busca cómo diferenciarlas desde el contenedor. Si no puedes, pon el código que te genera.

P.D.: ahora que te leo, no creo que kseso? se haya cabreado. Hacía referencia a este ejemplo, ¿no?

[kseso?]

Iniciado por Knibal

kseso agradezco tu ayuda, pero no entiendo tu cabreo.

Dije que a priori pensaba que no me servía ese código porqua ya había experimentado con widths al 100% y no me funcionaban.

De todas formas, copié el código antes de que lo eliminaras (?¿), así que de nuevo gracias, e intentaré darle una vuelta.

No es cabreo. Símplemente, no sobrecargo la BD con ejemplos que no sirven.

Mik, era esta respuesta tuya con una columna añadida. Con un enlace a ese tema para poder ver los dos códigos y compararlos (en uno 2, en el modificado 3) y una nota para ocultar la columna con "display: none"

[Knibal]

He estado dándole una vuelta y casi lo tengo, pero en IE (6,7 y 8) tengo un pequeño fallo, pongo el código que estoy usando:

Código:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">

      <head>

      <title>3 columnas</title>

      <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />

      <style type="text/css">

      * {margin:0;padding:0;}

      html, body {height: 100%; background-color:#ccc;}

      #contenedor {width: 900px; height: 100%; clear:both;
      }
      #col_der, #col_izq, #col_central {height: 100%;}
      #col_der {float: right; background-color: blue; width: 200px;}
      #col_izq {float: right; width: 300px; background-color: green;}
      #col_central {background: red; }
      </style>
      </head>
      <body>
		  <div id="contenedor">
			  <div id="col_der"> </div>
			  <div id="col_izq"> </div>
			  <div id="col_central"> </div>
		  </div>
      </body>
      </html>

Si lo veis en Firefox, Safari, Chrome, las 3 columnas están pegadas, mientras que en cualquier de los IExplorer, la columna roja y verde están levemente separadas, ¿de dónde sale esa separación? :\

[kseso?]

Hola Knibal.
Creo que es efecto óptico. Al menos yo lo veo igual en FF 3 e ie7.
Si cambias los colores de cada div ese efecto de transición entre color y color desaparece.
Para asegurarme hice una captura de pantalla ampliando al máximo las uniones y este es el resultado:



Como verás, no hay ni separación ni color distinto en los límites.

Un saludo

[Mikmoro]

En IE7 no hay separación. En IE6 sí la hay, que se resuelve con esto, que no afecta al resto:

#col_izq {float: right; width: 300px; background-color: green;margin-left: -3px;}