Problema com altura de DIV

Front-end
#1

Boa noite pessoal estou com dificuldade de fazer uma espécie de tabela com div, para ser exato seria um catálogo de vendas onde em cada linha tem um div que controla as colunas (que são divs).
O problema é que eu gostaria que todos as colunas fossem da mesma altura. Alguém poderia me ajudar nessa?

segue abaixo o 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" xml:lang="pt-br" lang="pt-br">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
        <title>Tebo Books</title>
        <link rel="stylesheet" media="all" href="css/padrao.css"/>
        <style type="text/css">
            
            .catProduto{
                width: 614px;
            }
            .linha{
                width: 100%;
                display: table-row;
                height: 100%;
            }
            .coluna{
                text-align: center;
                float:left;
                width: 200px;
                padding: 2px;
                min-height: 100%;
                height: auto;
            }
            .linha .coluna{
                height: 100%;
            }
            .coluna:hover{
                background-color: #aaccff;
            }
            .imagem {
                width: 200px;
                height: 200px;
                display: table-cell;
                vertical-align: middle;
            }
            .descricao {
                text-align: center;
                color: navy;
                font-size: 110%;
            }
            .preco {
                text-align: right;
                color: maroon;
                font-size: 130%;
            }
        </style>

    </head>
    <body>
        <div id="conteudo">
          <div id="divCabecalho">Tebo Books</div>
            <div id="divMenu">
              <div class="menuItem"><a href="principal.jsp">Home</a></div>
              <h1>Cadastros</h1>
              <div class="menuItem"><a href="UsuarioControlador">Usuários</a></div>
              <div class="menuItem"><a href="EstadoControlador">Estados</a></div>
              <div class="menuItem"><a href="ClienteControlador">Clientes</a></div>
              <div class="menuItem"><a href="ProdutoControlador">Produtos</a></div>
            </div>
            <div id="conteudoContainer">
                <div class='catProduto'>
                  <div class='linha'>
                    <div class='coluna'>
                      <div class='imagem'>
                        <img src='ProdutoFotoServlet?idProduto=2&largura=200&altura=200' alt='PRODUTO A COLOCANDO NOME BEM LONGO PARA VER NO QUE'/>
                      </div>
                      <div class='descricao'>PRODUTO A COLOCANDO NOME BEM LONGO PARA VER NO QUE</div>
                      <div class='preco'>R$ 10,50</div>
                    </div>
                    <div class='coluna'>
                      <div class='imagem'>
                        <img src='ProdutoFotoServlet?idProduto=4&largura=200&altura=200' alt='PRODUTO B'/>
                      </div>
                      <div class='descricao'>PRODUTO B</div>
                      <div class='preco'>R$ 5,00</div>
                    </div>
                    <div class='coluna'>
                      <div class='imagem'>
                        <img src='ProdutoFotoServlet?idProduto=5&largura=200&altura=200' alt='PRODUTO C'/>
                      </div>
                    <div class='descricao'>PRODUTO C</div>
                    <div class='preco'>R$ 7,00</div>
                  </div>
                </div>
                <div class='linha'>
                  <div class='coluna'>
                    <div class='imagem'>
                      <img src='ProdutoFotoServlet?idProduto=6&largura=200&altura=200' alt='PRODUTO D'/>
                    </div>
                    <div class='descricao'>PRODUTO D</div>
                    <div class='preco'>R$ 11,00</div>
                  </div>
                  <div class='coluna'>
                    <div class='imagem'>
                      <img src='ProdutoFotoServlet?idProduto=9&largura=200&altura=200' alt='PRODUTO E'/>
                    </div>
                    <div class='descricao'>PRODUTO E</div>
                    <div class='preco'>R$ 12,00</div>
                  </div>
                  <div class='coluna'>
                    <div class='imagem'>
                      <img src='ProdutoFotoServlet?idProduto=12&largura=200&altura=200' alt='PRODUTO F'/>
                    </div>
                    <div class='descricao'>PRODUTO F</div>
                    <div class='preco'>R$ 10,50</div>
                  </div>
                </div>
              </div>
            </div>            
          <div id="divRodape">Thales Eduardo Barros de Oliveira (RA: 1049737) - Tebo Software - 2010</div>
        </div>
    </body>
</html>

desde já agradeço a ajuda de todos

#2

Fala tebosoftware ,

Na classe do css linha coloca o height em pixels ao ínves de porcentagem…

Creio que assim resolve =)

abraço

#3

[quote=Zillo]Fala tebosoftware ,

Na classe do css linha coloca o height em pixels ao ínves de porcentagem…

Creio que assim resolve =)

abraço[/quote]

Blz Zillo, obrigado por responder.

Mas a sua sugestão não da certo pois eu preciso que seja dinamico pois as imagens podem ter altura variada e o texto pode ficar longo tb.

#4

mas, se as imagens terão tamanhos diferentes não há como a altura ser igual para todos… a não ser que você coloque uma altura grande onde todas as imagens sejam menores…

bom, acho que não entendi direito sua necessidade ?

vamos que vamos…

#5

A ideia era fazer com que o cliente ao passar o mouse sobre as colunas, ficasse com o fundo diferente, mas como cada um tem uma altura ficava estranho, entao mudei para fixar a altura da linha e das colunas e coloquei o display como table-cell ai funcionou. estou limitando os textos para ficar corre.
obrigado

#6