Hacer que una columna se acople al alto del contenedor

Leganz · #1 (**permalink**) 08/08/2010, 19:04

Hola, supongamos que tengo lo siguiente:

Un DIV TOTAL cuyo alto se define por el contenido
Y tengo 2 columnas, una donde va a haber contenido y otra donde va a haber otra cosa

Supongamos que la columna del contenido se hace más alta que el contenido de la columna 2 y quedan dispares.

cómo hago que el alto de la columna 2 se acople (quede igual) al de la columna 1, es decir, al alto total de DIV TOTAL.

Muchas gracias!!

codecweb98 · #2 (**permalink**) 09/08/2010, 00:41

El alto de las columnas de una fila de un tabla se emparejan automaticaménte, tomando el alto de la columna mas grande.

Código HTML:

Ver original<table cellspacing="0" cellpadding="0">
    <tr>
        <td bgcolor="red">
            Uno
        </td>
        <td bgcolor="blube">
            Uno<br />
            Dos<br />
            Tres
        </td>
    </tr>
</table>

Si pruebas este código lo comprobarás.

Leganz · #3 (**permalink**) 09/08/2010, 09:50

Cita:

Iniciado por codecweb98

El alto de las columnas de una fila de un tabla se emparejan automaticaménte, tomando el alto de la columna mas grande.

Código HTML:

Ver original<table cellspacing="0" cellpadding="0">
    <tr>
        <td bgcolor="red">
            Uno
        </td>
        <td bgcolor="blube">
            Uno<br />
            Dos<br />
            Tres
        </td>
    </tr>
</table>

Si pruebas este código lo comprobarás.

Ya conozco las tablas y nunca las usaría para el trabajo de diseñar un sitio web ^^

Hablo de CSS...

Gracias!

codecweb98 · #4 (**permalink**) 10/08/2010, 01:17

Ah pues que exquisito... ¿yo no le veo nada de malo las tablas?

Bueno si quieres una solución complicada podrías usar lo siguiente:

Código HTML:

Ver original<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css">
        div 
            {
            display:inline-block; 
            vertical-align: middle;
            padding: 10px;
            }
        </style>
 
    </head>
 
    <body>
        <div style="background-color:red;">Uno</div>
        <div style="background-color:blue;">Uno<br />Dos<br />Tres</div>
    </body>
</html>

Debe de jalar en IE, Firefox y Safari. Pero realmente esto no hace que las divs cambien de tamaño, solo las pone como columnas y las centra horizontalmente.

Podrías hacer modificar su tamaño, pero creo que eso sería con JavaScript.

jomaruro · #5 (**permalink**) 13/08/2010, 01:26

Hola:

Cita:

Iniciado por codecweb98

Ah pues que exquisito... ¿yo no le veo nada de malo las tablas?

No le veo la exquisitez, se debe usar cada cosa para lo que si inventó y las tablas se hicieron para tabular datos no para maquetar una web.

¿O eres de los que no le interesa cumplir los estándares?

Saludos.

codecweb98 · #6 (**permalink**) 13/08/2010, 10:22

Cuando dije "exquisito" me referí a que buscabas una solución elegante; y eso me parece excelente en un desarrollador (en ningún momento pretendí ofender).

Por otro lado: yo no veo porque usarlas para maquetación no sea estándar...

Cita:

Iniciado por http://www.w3.org/TR/html401/struct/tables.html

The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.

Como todo elemento, son únicamente una herramienta. Es decir: si necesito quitar un tornillo debo usar un desarmador; pero si no tengo uno, o es más fácil desatornillarlo con un cuchillo de mesa, así lo haré. De igual forma puedo utilizar el desatornillador para hacer otras cosas como: sacar clavos, abrir tapas de botes de pintura o inclusive como arma blanca (-jajajajaja-).

En fin... tu punto de vista es muy respetable y válido. Pero considero que los estándares no significan que tenemos usar todo para lo que originalmente se inventó: sino que tenemos que usar las cosas bien, de forma que sea entendible para el desarrollador y para otros (compatibilidad).

kseso? · #7 (**permalink**) 13/08/2010, 16:21

1.- ¿En un foro de css maquetando con tablas e intentando su justificación?
2.- El problema de utilizar en valor inline-block radica en la necesidad de utilizar algún hack para que versiones de ie anteriores a la 8 la emulen.

3.- Leganz:
Creo que lo que usted necesita/pretende hacer es lo que se conoce como falsas columnas, columnas equilibradas o similares.

Es un tema ya muy veterano. Hay múltiples soluciones, como las realizadas por:

Mikel Morote (aquí conocido como Mikmoro) en su página www.araudi.net
Matthew James Taylor en la suya http://matthewjamestaylor.com/
Y hasta yo tengo algún ejemplo realizado en la mía, creo recordar

Sólo tiene que hacer una búsqueda por los términos que le indicaba (o por sus equivalentes/variaciones en inglés.

jomaruro · #8 (**permalink**) 14/08/2010, 03:54

Hola:

Cita:

Iniciado por kseso?

1.- ¿En un foro de css maquetando con tablas e intentando su justificación?

Así se habla, Maestro. (Rebienvenido).

Saludos.