Layout com 3 divs aumentando juntas conforme conteudo?

[Sybok 0]

Olá amigos!

 

Estou tentando fazer um site com uma estrutura 3 x 3.

Quase como esse exemplo, mas com três linhas: (como se tivesses três dessas uma sobre a outra)

 

São três colunas e três linhas.

 

Foi tão fácil fazer usando uma tabela, o problema é que esta impossível replicar o efeito usando DIVs.

 

O conteúdo do site é dinâmico na coluna do centro o texto é inserido, quando tem mais texto a tabela muda de tamanho e as três colunas acompanham, mas usando DIVs, cada DIV se movimenta separadamente.

 

Já tentei usar uma DIV no fundo e usar o min-height 100% e height 100%, de modo que os DIVs aumentem na totalidade da DIV de fundo, infelizmente isso só funciona com o DIV do centro, os DIVs laterais continuam menores do que ele.

 

Cheguei a conclusão de que é impossível replicar o comportamento da tabela. Estou errado?

Como posso resolver meu problema? Abandono o tableless e uso a tabela ou troco de layout?

[William Bruno 1501]

basta utilizar uma técnica chamada Faux Columns.

[Sybok 0]

basta utilizar uma técnica chamada Faux Columns.

Putz, o problema é que a minha estrutura vai ter três andares.

Não é um layout simples de 3 colunas, ele além das colunas vai ter 3 linhas.

 

Acho que usar as tabelas vai ser mesmo a solução, muito embora o dado não seja tabular acho que nesse caso o tableless vai ter que ficar de fora.

[Willy Chagas 0]

Dai pelo que entendi você quer que as divs se ajustem conforme a resolução. Pra fazer isso você precisa trabalhar com % (porcentagem), fiz um exemplo da uma olhada vê se é isso que você precisa: VEJA O EXEMPLO

[Sybok 0]

Dai pelo que entendi você quer que as divs se ajustem conforme a resolução. Pra fazer isso você precisa trabalhar com % (porcentagem), fiz um exemplo da uma olhada vê se é isso que você precisa: VEJA O EXEMPLO

 

Olá amigo, infelizmente não funcionou aqui com o efeito que eu preciso.

 

Achei uma solução tableless, fazer as DIVs se comportarem como tabelas.

O problema é que a compatibilidade falha em alguns navegadores.

 

A solução tableless segue abaixo, mas achei estupida, pois trata-se de trocar seis por meia duzia e ainda trás problemas... É melhor eu começar a repensar esses conceitos de tableless, pois já começo a ver varias falhas no conceito em si.

 

#div_table{

display: table;

border-color: blue;

border-style:solid;

border-width:5px;

}

#div_td{

display: table-cell;

border-color: blue;

border-style:solid;

border-width:5px;

}

 

#div_tr{

display: table-row;

border-color: blue;

border-style:solid;

border-width:5px;

[William Bruno 1501]

poste um print do seu layout, pois até onde 'visualizei' pensando, dá para resolver muito facilmente aplicando Faux Columns.

 

A falha não está no conceito do paradigma Tableless, mas no nosso conhecimento para aplica-lo corretamente.