Foros del Web » Creando para Internet » CSS »

Bloques en dos columnas de ancho variable y con igual altura

Estas en el tema de Bloques en dos columnas de ancho variable y con igual altura en el foro de CSS en Foros del Web. Hace un tiempo comente en este foro (CSS) que estaba migrando de tables a divs y css , y voy colucionando todos los problemas que ...
  #1 (permalink)  
Antiguo 05/07/2007, 18:38
okram
Invitado
 
Mensajes: n/a
Puntos:
Bloques en dos columnas de ancho variable y con igual altura

Hace un tiempo comente en este foro (CSS) que estaba migrando de tables a divs y css, y voy colucionando todos los problemas que se me van presentando (sobretodo con IE ) lento, pero seguro ...

Ahora recurro a ustedes para solucionar algo. Con tablas era facil hacer que dos columnas tuvieran el mismo alto, sin importar que sus contenidos sean diferentes. Bastaba con poner:
Código HTML:
<table>
  <tr>
    <td>Columna 1</td>
    <td>Columna 2<br />Columna 2<br />Columna 2</td>
  </tr>
</table> 
y ambas columnas tendrian el mismo alto. Con los divs al principio se me hizo algo imposible, hasta que encontre este articulo:

http://www.cristalab.com/tips/39039/...-con-div-y-css
Cita:
Iniciado por Cristalab.com
Lo que voy a explicarles a continuación es como lograr en XHTML y CSS que cuando coloquemos un div dentro de otro, el div interior tenga la misma altura que el div en el que está contenido. Esto es util para diseños de varias columnas (Como un blog) donde quieran que una textura o color especifico siga creciendo en función del contenido de otra columna[...]
En efecto, lo que esta con rojo y en negrita es lo que buscaba, y me funciono , PERO!!!, tengo un problema.

Ninguna de las columnas en las que estoy trabajando tienen un ancho fijo, por lo al fin de cuentas ese tutorial no me sirve. Con tablas lo que queria hacer era sencillo, pero ahora lo veo imposible de nuevo de hacerlo con divs...

Alguien sabe como hacerlo... La idea es masomenos: Algunas veces:

Este es texto...........................Menu............
Este es texto que termina aqui..........Menu sigue......
........................................Sigue...........
........................................y sigue.........
........................................termino.........

y otras veces es:

Este es texto...................Menu....................
Este es texto que termina aqui..Menu sigue..............
................................Sigue...................
................................y sigue.................
................................termino.................
y otras veces:

Este es texto........Menu...............................
Sigue................Menu termina.......................
y sigue.................................................
y mas...................................................
y acaba!................................................

Espero se me haya entendido...

Un saludo,

Última edición por okram; 05/07/2007 a las 18:40 Razón: Cambio en el titulo ;-)
  #2 (permalink)  
Antiguo 05/07/2007, 19:55
 
Fecha de Ingreso: mayo-2003
Mensajes: 527
Antigüedad: 14 años, 6 meses
Puntos: 3
Re: Bloques en dos columnas de ancho variable y con igual altura

Hola, he dado con una posible solución. Me he basado en soluciones usadas para otros problemas diferentes, y también calentándome un poco la cabeza. Lo he probado en tu ejemplo pero con columnas de ancho variable y me sale.

La idea es esta:

bueno, olvida lo del borde antes que nada. He probado dándole ancho relativo y no funciona.

Como voy a usar posicionamiento absoluto en los hijos de "container", para poderlos posicionar con respecto a este, a container le doy un posicionamiento relativo, y le doy el ancho del documento que quiero, en este caso el 75% del documento. Luego, el bloque "content" lo floto a la izq y le doy un porcentaje del ancho de "container", p.ej el 75%.

Código:
#container {
    position:relative;
    background-color: #fff;
    overflow: hidden;
    width: 50%;
    margin: 10px auto 5px auto;
    border: 1px solid #000;
#content {
    background-color: #fff;
    width: 75%;
    float: left;
}

Luego, lo que hago es crear un nuevo bloque llamado "fondo", a cuyo fondo le doy el mismo color que el fondo de "menu", o sea, el color que quieres alargar, y este bloque nuevo debe tener el mismo contenido que la capa "content", luego explico por qué. Lo posiciono de forma absoluta y le doy de posición left el 75% del ancho de la columna "content" y de ancho le doy el resto, 25%.

Código:
#fondo {
	position:absolute;
	left: 75%;
	width: 25%;
	background-color: #0099FF;
}
Ahora llega lo verdaderamente importante:
Código:
#fondo * {
	position:relative;
	left: -1000px;
}
con esto lo que hago es posicionar todo elemento hijo del bloque "fondo", los cuales no los quiero porque ya los tengo en la columna "content", de forma que se salgan por el margen izquierdo de la pantalla. En esto me he inspirado en el método Phark de sustitución de un texto por imagen. Al tener posicionamiento relativo, el bloque se comporta como si los elementos realmente estuvieran ahí en su lugar inicial, aunque realmente no lo estén, lo cual le crea el rellenado al bloque y hace que el fondo se expanda, y al ser el mismo contenido del otro bloque y presuponiendo que la columna "content" siempre será más ancha que la columna "menu", el bloque "fondo" fluirá a la misma altura.

Por último, resta colocar el verdadero contenido que quiero mostrar en esa capa "menu", posicionándolo de forma absoluta de la misma forma que he hecho con la capa "fondo". Al posicionarse después, el orden de apilamiento será mayor y se colocará sobre la capa fondo (si se declaran al revés en el documento HTML solo se tendría que cambiar las propiedades z-index de cada uno).

Código:
#menu {
	position: absolute;
	left: 75%;
    width: 25%;
    color: #fff;
    background: #0099FF;
    text-align: left;
}
lo he probado tanto en FF como en IE7, metiendo como contenidos tanto texto como imágenes, y funciona. No he hecho más pruebas, así que es posible que esté limitado.

En cualquier caso, si nadie antes había dado con esta solución (supongo que habrá otras y mejores), me voy a permitir llamar a este método el Método de Zig-Zag de L.Martín (quien sabe si esto puede trascender y yo que soy pobre jejeje ), por mover primero a la derecha y luego a la izquierda.

Aquí está el CSS completo:

Código:
#container {
	position:relative;
    background-color: #fff;
    overflow: hidden;
    width: 50%;
    margin: 10px auto 5px auto;
    border: 1px solid #000;
}
#content {
    background-color: #fff;
    width: 75%;
    float: left;
}
#fondo {
	position:absolute;
	left: 75%;
	width: 25%;
	background-color: #0099FF;
}
#fondo * {
	position:relative;
	left: -1000px;
}
#menu {
	position: absolute;
	left: 75%;
    width: 25%;
    color: #fff;
    background: #0099FF;
    text-align: left;
}
y aquí pongo un ejemplo de HTML similar al posteado por okram que usa ese CSS:

Código HTML:
<body>
<div id="container">
    <div id="content">
        <p>bla bla bla bla</p>
        <p>bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
        <p><img src="imagenprueba.jpg" width="319" height="243" /></p>
  </div>
    <div id="fondo">
        <p>bla bla bla bla</p>
        <p>bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
        <p><img src="imagenprueba.jpg" width="319" height="243" /></p>
    </div>
    <div id="menu">
        bla bla bla bla
    </div>
</div>
</body> 
No lo he comprobado aún, pero si no me equivoco, este método no funcionaría en caso de que el ancho relativo asignado a la columna "menu", y por lo tanto a "fondo", fuera mayor que el asignado a "content", algo que no debería ser muy habitual, ya que el contenido de "fondo" no llegaría como mínimo a la misma altura que el de "content".

Y bueno, cualquier otro fallito de este método me lo decís. Me llevaré una desagradable sorpresa pero bueno, todo se puede mejorar no?

Última edición por Tigervlc; 05/07/2007 a las 20:17
  #3 (permalink)  
Antiguo 06/07/2007, 14:13
okram
Invitado
 
Mensajes: n/a
Puntos:
Re: Bloques en dos columnas de ancho variable y con igual altura

Hola, gracias por tu respuesta.

El problema es que una de las columnas deberá tener un ancho que dependa de su contenido, que se ajuste a él, la otra tendrá como ancho lo que reste del espacio. Por lo tanto, no puedo darle a ninguna de las columnas un ancho estable, nisiquiera con porcentajes, pues unas veces la columna dira solo "Hola" (es un ejemplo) y sera muy delgada, y otras veces dira "Bienvenido usuario, etc. etc", y debera ser mas ancha.

La columna que tendra el ancho minimo (la que se adapta a su contenido), tiene en el css un white-space: nowrap, espero que eso te de una idea de mi problema. Creo que hice mal en llamarla menu.

Cita:
Iniciado por Tigervlc
[...]no funcionaría en caso de que el ancho relativo asignado a la columna "menu", y por lo tanto a "fondo", fuera mayor que el asignado a "content", algo que no debería ser muy habitual, ya que el contenido de "fondo" no llegaría como mínimo a la misma altura que el de "content".
Si la columna (mal llamada) menu tiene mas contenido, la maxima altura que logra el bloque entero es la del bloque content (IE)

Gracias por tu ayuda...

Un saludo,
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:47.